Difference between revisions of "TTML/changeProposal015"

From W3C Wiki
Jump to: navigation, search
(multiple row alignment (flex box in CSS mapping): Changed CSS mapping to use justify-content property)
(multiple row alignment (flex box in CSS mapping): Added mapping table from multiRowAlign to justify-content property)
Line 225: Line 225:
* '''Need to define mappings for other combinations''' of textAlign and multiRowAlign to get desired behaviour.
The mapping of <code>multiRowAlign</code> to the <code>justify-content</code> property applied to a HTML <code>div</code> with the <code>display</code> property set to <code>flex</code> is:
{| class="wikitable"
! multiRowAlign !! justify-content
| start || flex-start
| center || center
| end || flex-end
== Dependencies on other packages ==
== Dependencies on other packages ==

Revision as of 17:38, 21 March 2014

Style.CSS - OPEN

  • Owner: Glenn Adams.
  • Started: 14/06/13

Issues Addressed

Summary and Change details

TTML 1.0 did not adopt a number of properties that have subsequently been found to important.

Namely :


the margin property was omitted since it was felt that positioning could generally be made explicit using origin and extent, however a common practice in television content is to indent the second and subsequent lines in a multi line caption. This is hard to replicate in TTML 1.0, as it requires explicit positioning of two relative lines, and only regions may be positioned. It can be approximated by using explicit space characters and xml:space preserve, however this is an inaccurate and not a very elegant solution.

This change proposal adds the margin property as a style properties admissible on block level and inline elements.


The padding property was omitted on all elements except the region. This leads to ugly captions if the only opaque background is in the spans.

This change proposal adds the padding property as a style properties admissible on block level and inline elements.

[GA] Implemented in https://dvcs.w3.org/hg/ttml/rev/edf3344d2924.


This is ISSUE-286.

Padding can be applied to text in a span to improve readability when text is displayed over a background colour. However if a line break is inserted because the text doesn't fit on a single line the padding does not apply. This change proposal adds the box-decoration-break property to allow the padding to apply at line breaks.

Output Example:

No padding

tight alignment of background area with text can be hard to read

Left and right padding

padding on left and right makes it easier

Left and right padding
broken across a line

but in the simple form doesn't apply across line breaks

Left and right padding
broken across a line with decoration=clone

"box-decoration-break: clone" is intended to solve this problem
NB this last example is a mock-up only because box-decoration-break: clone is not supported on all browsers

Note that EBU-TT-D specifies a syntax for this behaviour as a style attribute, ebutts:linePadding that takes a single length parameter and applies it as inline-progression padding on either end of each wrapped line, i.e. roughly equivalent to specifying start and end padding on a span with box-decoration-break: clone. This prior work should be taken as a starting point for developing a syntax in TTML2, which ideally will be a superset of (or identical to) the EBU-TT-D syntax.

TTML2 syntax

Style attribute tts:linePadding applies to block-level elements tt:body, tt:div and tt:p. Has no effect when declared solely on a tt:span. Value permitted is a single <length>. Percentages are relative to the width of the region. Length values must be zero or positive. Animatable: discrete.

Every line area created to contain the text contained in a paragraph with a non-zero linePadding will be inset at the start and end by the specified length. The background color at the start and end of each line will be extended into this inset space.

PAL: Are TTML 1 processors expected to ignore TTML 2 attributes that are in the same namespace at TTML 1? Is this the case in practice?

TTML2 example

The tts:linePadding style is illustrated by the following example:

<p tts:color="white" tts:linePadding="0.5em">
   <span tts:backgroundColor="black">
      Left and right padding broken across a line

CSS mapping

Use of linePadding results in the properties padding-left, padding-right and box-decoration-break: clone being set on a span around the text, with an anonymous span being introduced if necessary. The previous example thus results in the following example code when mapped to HTML5/CSS:

<p style="color: white;">
<span style="background-color: black; padding-left: 0.5em; padding-right: 0.5em; box-decoration-break: clone;">
Left and right padding broken across a line

This produces an output similar to:

Left and right padding
broken across a line

NB the wiki source for this example differs from the mapping provided above because browser support for box-decoration-break: clone is not yet available


the border property was omitted, as it was felt that a similar effect could be achieved with the padding applied to regions allowinf the background colour to be visible

This however fails to replicate some effects achievable in 708 window styles.

This change proposal adds the border property as a style properties admissible on region elements.

[GA] Implemented in https://dvcs.w3.org/hg/ttml/rev/9b0f69325bde.

line stacking strategy

the line stacking strategy property was omitted for simplicity, and the XSL:FO default was assumed, this however is a barrier to mapping the style properties onto CSS, as this is felt to be a larger use case today than when TTML 1.0 was designed, the line stacking property is added. A ttp:parameter can be used to set the appropriate default for this property to override the default. Thus content authored to TTML 1.0 will retain the original stacking semantics, new content has the option of setting the default to that of CSS.

This change proposal reintroduces the line stacking strategy property as a style properties admissible on block level elements.

region anchor points

TTML 1.0 has a single anchor point for regions (namely the top left corner). This suffices for content where the size is known ahead of time, however very often content is required that may have a variable width or height (so called shrink-to-fit) layouts. In such a case it is not possible with any degree of accuracy to create center, bottom or right aligned regions.

This proposal allows the author greater control to define the anchor point on the region by extending the extent attribute to allow two optional additional values to represent 'right' and 'bottom', and to allow both the origin attribute and extent attributes to admit 'auto' as a value. The default will be 0, 0 thus old content will continue to work as before, but new content will be able to take advantage of the new styles.

For example, a region centered around the 50% vertical, which is 90% of the screen width and 20% of the screen height and placed flush on the bottom screen edge:

<region tts:origin="5% auto" tts:extent="auto 20% 5% 0%"

text outline

At the time TTML 1.0 was authored, the CSSWG was working on an outline property. This property was never finished, and has since been dropped. A similar effect can be approximated using the text-shadow property. Such an effect is important to reproduce TV content. Thus this change proposal re-defines the text outline property in terms of the text shadow property which is also added (see below).

text shadow

See above for rationale. In addition the text-shadow property may be used to create the text raised and lowered effects as well as drop shadows and feathering asked for by SMPTE and the FCC regulations for internet delivered TV. Thus this change proposal adds the text shadow property.

shrink fit

It is sometimes adventageous to be able to define regions such that their width and height is not determined in advance, but is determined instead by the length of the longest natural linebox created by the content. This change proposal allows the values auto to be used in the extent property to achieve this.

font face rule

This is ISSUE-273

In order to present a document as intended when the document was authored some shared knowledge of the fonts that will be used to render is advantageous. It would reduce the likelihood that rendered text will not fit within the allocated region, and increase the likelihood that the font will be displayed as intended. Another use case is to ensure that all the glyphs required are present: an author may wish to provide a reference to a font resource that is known to include those glyphs. The CSS3 mechanism to provide access to downloadable font resources, which can then be referenced by tts:fontFamily is the @font-face rule. This change proposal allows multiple font-face to be used in the <styling> element to achieve this.

Example TTML (suggested syntax - for review):

   <fontFace fontFamilyName="myNiceFont">
      <fontFaceSource fontFaceUrl="myNiceFont.woff" fontFaceFormat="woff">
      <fontFaceSource fontFaceUrl="myNiceFont.ttf" fontFaceFormat="opentype">
   <style id="s1" tts:fontFamily="myNiceFont"/>

multiple row alignment (flex box in CSS mapping)

This is ISSUE-285

A common captioning presentation style requires the alignment of displayed rows of text relative to each other, and alignment of the set relative to a region. This can be achieved using the flex property in CSS.

For example (when mapped to HTML/CSS):

<div style="display: flex; justify-content: center; width: 75%;">
<p style="text-align: left;">
Beware the Jubjub bird, and shun<br/>
The frumious Bandersnatch!

This example renders as:

Beware the Jubjub bird, and shun
The frumious Bandersnatch!

A TTML-style syntax for this mapping is defined in EBU-TT and EBU-TT-D using the ebutts:multiRowAlign attribute, which modifies the behaviour of tts:textAlign.

The above example would be expressed in EBU-TT (omitting irrelevant bits) as:

   <style id="s2" textAlign="center" ebutts:multiRowAlign="start"/>
      <p style="s2">
         <span>Beware the Jubjub bird, and shun<br/>The frumious Bandersnatch!</span></p>

The mapping of multiRowAlign to the justify-content property applied to a HTML div with the display property set to flex is:

multiRowAlign justify-content
start flex-start
center center
end flex-end

Dependencies on other packages

As the effects that the new properties allow are not in general achievable using TTML 1.0 properties authors are potentially faced with a dilemma in creating content which will work adequately on older processors while still taking advantage of the new properties. The Conditional Styling proposal will allow graceful forward compatibility to the extent possible.

Edits to be applied


Edits applied


  • Simplifies conversion from 608 and 708 content.
  • Fixes incompatibilities with CSS
  • Allows greater control of margins within a paragraph.
  • Allows more flexible content to be authored
  • Allows greater control of rendered appearance of text