For the purpose of determining the applicability of a style property, if the style property is defined so as to apply to a
span element, then it also applies to
anonymous span elements.
10.2 Styling Attribute Vocabulary
This section defines the 10.2.1 style attribute used
with certain animation elements, content elements, certain layout elements, and style definition elements.
In addition, this section specifies the following attributes in the TT Style Namespace
for use with style definition elements, certain layout elements, and content elements
that support inline style specifications:
In addition to the above visual styling attribues, this section specifies the following audio
styling attributes in the TT Audio Style Namespace
for use with style definition elements and content elements
that support inline style specifications:
Each style attribute (and corresponding property) defined in this section makes use of a
style property definition table, which
specifies one or more of the following aspects of the style: value syntax, initial value,
elements to which style semantically applies, whether style is inherited or not, how percentage values are interpreted (if applicable),
whether (and how) style is animatable, and semantic basis (derivation).
For animatable styles, the term discrete refers to the use of either a set
element or an animate element with the discrete value for its
<calculation-mode>. The term continuous refers to
the use of an animate element with a linear, paced, or spline
value for its <calculation-mode>. The term none indicates the style
is not animatable.
Note:
This specification makes use of lowerCamelCased local
names for style attributes that
are based upon like-named properties defined by [XSL-FO 1.1].
This convention is likewise extended to token values of such
properties.
Note:
An inheritable style property may be expressed as a specified attribute on a
region element or on a
content element type
independently of whether the property applies to that
element type. This capability permits the expression of an inheritable
style property on ancestor elements to which the property
does not apply.
Note:
Due to the general syntax of this specification (and the schemas it references) with respect
to how style attributes are specified, particularly for the purpose of supporting inheritance,
it is possible for an author to inadvertently specify a non-inheritable style attribute on
an element that applies neither to that element or any of its descendants while still remaining
conformant from a content validity perspective. Content authors may wish to make use of TTML
content verification tools that detect and warn about such usage.
10.2.1 style
The style attribute is used by referential style association
to reference one or more style elements each of which define a style (property) set.
The style attribute may be specified by an instance of the following
element types:
If specified, the value of a style attribute must
adhere to the IDREFS data type defined by [XML Schema Part 2],
§3.3.10, and, furthermore, each IDREF must reference a style element
which has a styling element as an ancestor.
If the same IDREF, ID1 , appears more than one time in the value of a style
attribute, then there should be an intervening IDREF, ID2 , where
ID2 is not equal to ID1.
Note:
This constraint is intended to discourage the use of redundant referential styling while still
allowing the same style to be referenced multiple times in order to potentially override prior
referenced styles, e.g., when an intervening, distinct style is referenced in the IDREFS list.
10.2.2 tts:backgroundClip
The tts:backgroundClip attribute is used to specify a style property that
determines the background painting rectangle within
which the background is painted.
The tts:backgroundClip style is illustrated by the following example.
Example Fragment – Background Clip
<region xml:id="r1">
<style tts:extent="306px 114px"/>
<style tts:backgroundColor="red"/>
<style tts:backgroundOrigin="padding"/>
<style tts:padding="27px 72px"/>
<style tts:backgroundRepeat="noRepeat"/>
<style tts:backgroundImage="#blue102px57px"/>
<style tts:backgroundClip="content"/>
</region>
|
Example Rendition – Background Clip |
10.2.3 tts:backgroundColor
The tts:backgroundColor attribute is used to specify a style property that
defines the background color of a region or an area generated by content flowed into a region.
The tts:backgroundColor style is illustrated by the following example.
Example Fragment – Background Color
<region xml:id="r1">
<style tts:extent="306px 114px"/>
<style tts:backgroundColor="red"/>
<style tts:color="white"/>
<style tts:displayAlign="after"/>
<style tts:padding="3px 30px"/>
</region>
...
<p region="r1" tts:backgroundColor="purple" tts:textAlign="center">
Twinkle, twinkle, little bat!<br/>
How <span tts:backgroundColor="green">I wonder</span> where you're at!
</p>
|
Example Rendition – Background Color |
10.2.4 tts:backgroundExtent
The tts:backgroundExtent attribute may be used to specify the extent (size) of a background image
independently of the image's intrinsic extent (size).
If the value of this attribute is auto, then the computed value
of the style property must be considered to be the same as the intrinsic extent (size) of the associated background image.
If the value of this attribute is contain, then the computed value
of the style property is determined by performing the
[compute containment scaling] procedure,
where the target rectangle TR is initialized to the intrinsic width and height of the image,
the reference rectangle RR is set to the background positioning rectangle,
and the resulting output value of the target rectangle TR is the computed value.
If the value of this attribute is cover, then the computed value
of the style property is determined by performing the
[compute cover scaling] procedure,
where the target rectangle TR is initialized to the intrinsic width and height of the image,
the reference rectangle RR is set to the background positioning rectangle,
and the resulting output value of the target rectangle TR is the computed value.
If the value of this attribute consists of two <measure>
specifications, then the first specification is the width and the second specification is the height,
respectively, of the computed value of this property, in which case both <measure> specifications
must resolve (or be resolvable) to non-negative lengths.
If the computed value of this style property differs from the image's intrinsic extent (size), then the image raster is scaled independently
in each dimension to match the computed extent value.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed background extent and the supported background extent is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value most distant from [0,0], i.e., of greatest extent, is used.
This rule for resolving closest supported value makes use of the nearest larger rather than nearest smaller supported distance.
The tts:backgroundExtent style is illustrated by the following example.
Example Fragment – Background Extent
<region xml:id="r1">
<style tts:extent="306px 114px"/>
<style tts:backgroundColor="red"/>
<style tts:backgroundRepeat="noRepeat"/>
<style tts:backgroundImage="#blue102px57px"/>
<style tts:backgroundExtent="cover"/>
</region>
|
Example Rendition – Background Extent |
10.2.5 tts:backgroundImage
The tts:backgroundImage attribute is used to specify a style property that
designates a background non-content image to be rendered as
the background image of a region or an area generated by content flowed into a region.
A tts:backgroundImage attribute should not make reference to a content image
used to represent actual content, such as a raster image rendering of a caption. Rather, the use of tts:backgroundImage
should be limited to styling the background of an element where the content is represented by other means. If it is necessary
to represent content using a raster image, then it should be expressed by means of an image
element in a block or inline context.
An <image> expression used with this style property may directly reference an external image resource;
however, authors should refrain from doing so, and instead, constrain their usage to refer only to image
children of a resources element.
Note:
Referring indirectly to an image by means of an image element makes it possible to
specify an image as an embedded data resource, and specify
additional information about the image, such as its content type, etc. Furthermore, by exploiting the use of multiple
source children in an image element,
it becomes possible to specify resolution specific images and fallback image resources.
Note:
Due to the use of the value none as a keyword, it is not possible to use this value as an
image expression; consequently, if one desires to use such an expression, it must
be disambiguated from the keyword none by employing an absolute URI or a different but equivalent relative URI,
such as ./none.
The extent of the content rectangle of an area generated by an element associated with a background image is not affected by the resolved
extent of the background image.
Note:
Some profiles of TTML1, such as [SMPTE ST 2052-1] and its dependent profiles, specify that a background image affects the
extent of the content rectangle of an area generated by an associated element. When transforming between these profiles and TTML2,
such a background image should be mapped to an image element,
and not a tts:backgroundImage attribute.
The tts:backgroundImage style is illustrated by the following example.
Example Fragment – Background Image using Embedded Image Resource
<head>
<resources>
<image xml:id="blue102px57px">
<source>
<data type="image/png" length="119">
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8
YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII=
</data>
</source>
</image>
</resources>
</head>
...
<region xml:id="r1">
<style tts:extent="306px 114px"/>
<style tts:backgroundColor="red"/>
<style tts:backgroundClip="padding"/>
<style tts:backgroundRepeat="noRepeat"/>
<style tts:backgroundImage="#blue102px57px"/>
<style tts:padding="27px 72px"/>
</region>
|
Example Rendition – Background Image |
10.2.6 tts:backgroundOrigin
The tts:backgroundOrigin attribute is used to specify a style property that
determines the background positioning rectangle within
which the background is positioned.
The tts:backgroundOrigin style is illustrated by the following example.
Example Fragment – Background Origin
<region xml:id="r1">
<style tts:extent="306px 114px"/>
<style tts:backgroundColor="red"/>
<style tts:backgroundRepeat="noRepeat"/>
<style tts:backgroundImage="#blue102px57px"/>
<style tts:backgroundOrigin="content"/>
</region>
|
Example Rendition – Background Origin |
10.2.7 tts:backgroundPosition
The tts:backgroundPosition attribute is used to specify a style property that
defines whether and how a background image is positioned in a region or an area generated by content flowed into a region.
A percentage value component for a horizontal position offset is relative to the width of the
background positioning rectangle minus the width of the background image.
A percentage value component for a vertical position offset is relative to the height of the
background positioning rectangle minus the height of the background image.
The tts:backgroundPosition style is illustrated by the following example.
Example Fragment – Background Position
<region xml:id="r1">
<style tts:extent="306px 114px"/>
<style tts:backgroundColor="red"/>
<style tts:backgroundRepeat="noRepeat"/>
<style tts:backgroundImage="#blue102px57px"/>
<style tts:backgroundPosition="center"/>
</region>
|
Example Rendition – Background Position |
10.2.8 tts:backgroundRepeat
The tts:backgroundRepeat attribute is used to specify a style property that
defines whether and how a background image is repeated (tiled) into a region or an area generated by content flowed into a region.
The tts:backgroundRepeat style is illustrated by the following example.
Example Fragment – Background Repeat
<region xml:id="r1">
<style tts:extent="306px 114px"/>
<style tts:backgroundColor="red"/>
<style tts:backgroundImage="#blue102px57px"/>
<style tts:backgroundRepeat="repeatX"/>
</region>
|
Example Rendition – Background Repeat |
10.2.9 tts:border
The tts:border attribute is used to specify a style property that
defines the border of a region or an area generated by content flowed into a region.
Note:
When applied to a region, a border is applied as an inset to a region's extent, which is to say, the content rectangle of a region area is reduced by
the presence of a border applied to the region.
If no border thickness is specified in the value of the tts:border property,
then the border thickness must be interpreted as if a thickness of
medium were specified.
If a computed value of the border thickness associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the one-dimensional Euclidean distance between
the computed border thickness and the supported border thickness is minimized on a per-edge basis. If there are multiple closest supported values equally distant from
the computed value for a given edge, then the value least distant from 0, i.e., the least border thickness, is used.
If no border style is specified in the value of the tts:border property,
then the border style must be interpreted as if a style of
none were specified.
If a computed value of the border style associated with this attribute is not supported,
then a presentation processor must use the value solid.
If no border color is specified in the value of the tts:border property,
then the border color must be interpreted as if a color equal
to the computed value of the element's tts:color style property were specified.
If no border radii is specified in the value of the tts:border property,
then the border radii must be interpreted as if a radii of
0 were specified.
If a computed value of the border radii associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the computed border radii and the supported border radii
is minimized.
The tts:border style is illustrated by the following example.
Example Fragment – Border
<region xml:id="r1">
<style tts:extent="306px 114px"/>
<style tts:border="2px solid red"/>
<style tts:color="white"/>
<style tts:displayAlign="center"/>
<style tts:padding="3px 30px"/>
</region>
...
<p region="r1" tts:border="4px solid green" tts:textAlign="center">
Twinkle, twinkle, little bat!<br/>
How <span tts:border="8px solid blue">I wonder</span> where you're at!
</p>
|
Example Rendition – Border
|
The tts:border style with rounding is illustrated by the following example.
Example Fragment – Border with Rounding
<style xml:id="roundedBorder" tts:border="2px solid lime radii(10px)" tts:backgroundColor="black"/>
...
<div tts:color="white" tts:textAlign="center">
<p style="roundedBorder">Border rounding on a <br/>p element.</p>
<p>
<span style="roundedBorder">Border rounding on span</span>
<br/>
<span style="roundedBorder">A shorter span</span>
</p>
</div>
|
Example Rendition – Border rounding
|
10.2.10 tts:bpd
The tts:bpd attribute is used to specify the
block progression dimension, or, more succinctly, the bpd of an area generated by content flowed into a region.
Note:
The term block progression dimension is interpreted in a writing mode relative manner
such that bpd always corresponds to a distance in the block
progression direction. Therefore, in horizontal writing modes, bpd expresses a vertical distance,
while, in vertical writing mode, bpd expresses a horizontal distance,
where horizontal and vertical are always interpreted in an absolute sense.
If a <measure> is expressed as a <length> value, then it must be non-negative.
If a tts:bpd attribute is specified on a span element
and the computed value of the tts:display property that applies to that element is not inlineBlock,
then the semantics of tts:bpd only apply when computing the block progression dimension of any applicable background color or image;
however, the dimensions of the content rectangles of the generated areas are not changed.
If a percentage value is used in a <length> expression of this attribute,
it is resolved with respect to the applicable absolute dimension of the generated area's containing area
(the nearest ancestor area).
Note:
A <length> expression used with this attribute is associated with
a specific, writing mode relative dimension, which is then resolved to an absolute dimension
in accordance with the applicable writing mode. If that absolute dimension is vertical (horizontal),
then a percentage value is resolved in terms of the same vertical (horizontal) absolute dimension of
the reference area (the nearest ancestor area).
The tts:bpd style is illustrated by the following example.
Example Fragment – Block Progression Dimension
<p tts:fontSize="24px" tts:lineHeight="48px" tts:bpd="96px">
the woods are <span tts:display="inlineBlock" tts:bpd="36px">getting green</span> ...
</p>
|
Note:
In the above example, the tts:bpd attribute on the p element
assigns a fixed dimension to the height of the content rectangle of the block area generated by the paragraph, while
the tts:bpd attribute on the span element assigns a fixed
dimension to the height of the content rectangle of the inline block area generated by the span.
10.2.11 tts:color
The tts:color attribute is used to specify a style property that
defines the foreground color of marks associated with an area generated by content flowed into a region.
| Values: |
<color>
|
| Initial: | see prose |
| Applies to: |
span; see also Note
|
| Inherited: | yes |
| Percentages: | N/A |
| Animatable: | discrete; continuous |
| Semantic basis: | color derivation |
The initial value of the tts:color property
is considered to be implementation dependent. In the absence of
end-user preference information, a conformant presentation processor
should use an initial value that is highly contrastive to the
background color of the root container region.
The tts:color style is illustrated by the following example.
Example Fragment – Color
<region xml:id="r1">
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="after"/>
<style tts:textAlign="center"/>
</region>
...
<p region="r1">
In spring, when woods are <span tts:color="green">getting green</span>,<br/>
I'll try and tell you what I mean.
</p>
|
Example Rendition – Color |
10.2.12 tts:direction
The tts:direction attribute is used to specify a style property that, depending on the context of use,
determines (1) the bidirectional paragraph level, or (2) the directionality of a bidirectional embedding or override,
about which see [UAX9].
When applied to a p element, the computed value of this property explicitly establishes the
paragraph level as specified by [UAX9], §4.3, Higher Level Protocol HL1.
When applied to a span element (or anonymous span), the computed value of this property, in combination with the computed value
of the tts:unicodeBidi style property, determines the directionality of a bidirectional embedding or override as specified by
[UAX9], §4.3, Higher Level Protocol HL3.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value ltr.
The tts:direction style is illustrated by the following example.
Example Fragment – Direction
<p>
The title of the book is
"<span tts:unicodeBidi="embed" tts:direction="rtl">نشاط التدويل، W3C</span>"
</p>
|
Example Rendition – Direction
|
10.2.12.1 Special Semantics of Direction
When performing style resolution processing (see 10.4.4 Style Resolution Processing),
the resolution of the computed value of tts:direction on a region element
R is determined according to the following ordered rules, where the first applicable rule applies:
if a tts:direction attribute is specified on R, then the computed value
tts:direction is the specified value;
if a tts:writingMode attribute is specified on R, then the computed value
tts:direction is the
inline progression direction determined by the computed value of
tts:writingMode on R;
otherwise, the computed value of tts:direction is the initial value.
Note:
The computed value of tts:direction on a region element
as determined above effectively becomes the value of tts:direction inherited by elements that are subject to
region style inheritance semantics.
In the case of any other element E, where E is not a
region element, the presence or absence of a tts:writingMode attribute
has no affect on the resolution of the computed value of tts:direction on E.
Note:
The semantics described above correspond to the XSL modifications to the CSS definition of the
direction property as defined by [XSL-FO 1.1] §7.29.1, and, as such, are included in the scope of the
#direction feature.
10.2.13 tts:disparity
The tts:disparity attribute is used to specify the binocular disparity to be applied
in order to simulate stereopsis (stereoscopic depth). A disparity of zero corresponds to the plane of display; a negative value corresponds to depths in front
of the plane of display; and a positive value corresponds to depths behind the plane of display. See [SMITH] for details on the relationship
between disparity and perceived depth.
When rendering a region on the right (left) image of a stereoscopic image pair, the center of the region is offset along the horizontal axis by a value equal to ½ (-½) the computed value of tts:disparity, where a positive offset is to the right, and a negative offset is to the left.
Unless rendering onto a stereoscopic image pair, the tts:disparity attribute is ignored for the purpose of presentation processing.
The author should ensure that the perceived depth of a region is positioned in front of any object in the scene during the entire time the region is visible. The stereoscopic effect will be broken if an object in the scene is perceived to be in front of the region.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed disparity and the supported disparity is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value least distant from 0 is used.
Note:
In general, the presentation of stereoscopic content depends on the use
of sub-pixel (anti-aliasing) rendering techniques; as such, implementations
that quantize disparity adjusted positions to an integral value
may produce undesirable side effects. This is particularly
disconcerting when smooth animation of disparity applies, e.g.,
when the author is attempting to maintain a constant distance between a subject and
its associated text.
The tts:disparity style is illustrated by the following example fragment and rendition. Note that, in typical television scenarios, disparity ranges from -1% to 2% of screen width. This example, which uses a disparity of 5%, exaggerates the effects of disparity for clarity of illustration.
Example Fragment – Disparity
<region xml:id="r1">
<style tts:extent="80% 10%"/>
<style tts:origin="10% 10%"/>
<style tts:disparity="5%"/>
...
</region>
...
<p region="r1">
Stereoscopic
</p>
|
Example Rendition – Disparity (Left and Right Images) |
10.2.14 tts:display
The tts:display attribute is used to specify a style property that
defines whether an element is a candidate for layout and composition
in a region.
If the value of this attribute is auto,
then the affected element is a candidate for region layout and
presentation; however, if the value is none, then the
affected element and its descendants must be considered ineligible for region
layout and presentation.
If the value of this attribute is inlineBlock and this attribute is applied
to a span element, then
inline block display semantics apply and the element
is a candidate for region layout and presentation. Furthermore, it is considered an error if the
inlineBlock value is applied to any element which is not a span element.
The tts:display style is illustrated by the following example.
Example Fragment – Display
<region xml:id="r1">
<style tts:extent="369px 119px"
tts:backgroundColor="black"
tts:color="white"
tts:displayAlign="before"
tts:textAlign="start"/>
</region>
...
<div region="r1">
<p dur="5s">
[[[
<span tts:display="none">
<set begin="1s" dur="1s" tts:display="auto"/>
Beautiful soup,
</span>
<span tts:display="none">
<set begin="2s" dur="1s" tts:display="auto"/>
so rich and green,
</span>
<span tts:display="none">
<set begin="3s" dur="1s" tts:display="auto"/>
waiting in a hot tureen!
</span>
]]]
</p>
</div>
|
Example Rendition – Display
|
|
|
|
|
10.2.15 tts:displayAlign
The tts:displayAlign attribute is used to specify a style property that
defines the alignment of block areas in the block progression direction.
If the value of this attribute is justify, then (unused) available space in the
block progression dimension is evenly distributed between block area children of
the block area generated by the element to which this attribute applies.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value before.
The tts:displayAlign style is illustrated by the following example.
Example Fragment – Display Align
<region xml:id="r1">
<style tts:extent="128px 66px" tts:origin="0px 0px"
tts:backgroundColor="black" tts:color="white"/>
<style tts:displayAlign="before"/>
<style tts:textAlign="start"/>
</region>
<region xml:id="r2">
<style tts:extent="192px 66px" tts:origin="128px 66px"/>
tts:backgroundColor="green" tts:color="white"/>
<style tts:displayAlign="after"/>
<style tts:textAlign="start"/>
</region>
<region xml:id="r3">
<style tts:extent="128px 66px"/> style tts:origin="0px 132px"
tts:backgroundColor="black" tts:color="white"/>
<style tts:displayAlign="before"/>
<style tts:textAlign="start"/>
</region>
<region xml:id="r4">
<style tts:extent="192px 66px" tts:origin="128px 198px"/>
tts:backgroundColor="green" tts:color="white"/>
<style tts:displayAlign="after"/>
<style tts:textAlign="start"/>
</region>
...
<div>
<p region="r1">I sent a message to the fish:</p>
<p region="r2">I told them<br/> "This is what I wish."</p>
<p region="r3">The little fishes of the sea,</p>
<p region="r4">They sent an<br/> answer back to me.</p>
</div>
|
Example Rendition – Display Align |
10.2.16 tts:extent
The tts:extent attribute may be used for the following purposes:
to specify the width and height
of the root container region,
which has the effect of defining
the document coordinate space,
about which see H.3 Coordinate Space;
to specify or override the
width and height
of a content region;
to specify the
width and height
of an image, overriding its intrinsic extent.
Note:
If a border and (or) padding are applied to a region, then the region's extent includes that border and padding,
i.e., border and padding are both applied as insets, and, therefore, are interior to the extent of the region.
If a tts:extent attribute is specified on the tt element,
then the specified value is restricted to one of the following:
(1) the auto keyword,
(2) the contain keyword, or
(3) two <length> specifications,
where these specifications are expressed as non-percentage, definite lengths using pixel units.
All other syntactically legal values must not be used in this context, and,
if used, must be considered an error and must be ignored
for the purpose of presentation processing, in which case the initial value (auto) applies.
If a tts:extent attribute is specified on a region element,
then its computed value determines the width and height
of the associated content region.
If a tts:extent attribute is specified on an image element, then its computed value determines the width and height of the image.
If a tts:extent attribute is specified on a div or p element, then the semantics specified by
10.2.16.1 Special Usage of Extent apply.
If the value of this attribute is auto, then the computed value of its associated property is determined as follows:
if the property applies to the tt element, then auto is interpreted as if the value contain
were specified;
if the property applies to a region element, either directly or indirectly, then auto is interpreted as if
the value "100% 100%" were specified;
if the property applies to an image element, then auto
is interpreted as if a value equal to the image's intrinsic extent were specified using two pixel-based <length> components, for example, "200px 100px".
Note:
This attribute permits a value consisting of a single keyword "auto" and
another value consisting of two keywords "auto auto". These two different values have distinct meanings and are not equivalent.
In particular, the single keyword value "auto" has the semantics described immediately above; however, the two keywords value
"auto auto" consists of two <measure> expressions, each using the
<measure> keyword auto as defined in 10.3.24 <measure>.
If the value of this attribute is contain, then the computed value of its associated property is determined as follows:
if the property applies to the tt element, then contain is interpreted as specified in
H Root Container Region Semantics;
if the property applies to a region element,
then the computed value is determined by performing the
[compute containment scaling] procedure,
where the target rectangle TR is initialized to the
intrinsic block content extent of the region's content,
the reference rectangle RR is set to the extent of the root container region,
and the resulting output value of the target rectangle TR is the computed value;
if the property applies to an image element,
then the computed value is determined by performing the
[compute containment scaling] procedure,
where the target rectangle TR is initialized to the
intrinsic image extent of the image,
the reference rectangle RR is set to the available content space in the containing block area or line area
in accordance to whether the current formatting context is a block or inline formatting context, respectively,
and the resulting output value of the target rectangle TR is the computed value.
If the value of this attribute is cover, then the computed value of its associated property is determined as follows:
if the property applies to a region element,
then the computed value is determined by performing the
[compute cover scaling] procedure,
where the target rectangle TR is initialized to the
intrinsic block content extent of the region's content,
the reference rectangle RR is set to the extent of the root container region,
and the resulting output value of the target rectangle TR is the computed value;
if the property applies to an image element,
then the computed value is determined by performing the
[compute cover scaling] procedure,
where the target rectangle TR is initialized to the
intrinsic image extent of the image,
the reference rectangle RR is set to the available content space in the containing block area or line area
in accordance to whether the current formatting context is a block or inline formatting context, respectively,
and the resulting output value of the target rectangle TR is the computed value.
If the value of this attribute consists of two <measure>
specifications, then they must be interpreted as
width and height, where the first specification is the
width, and the second specification is the height,
in which case both <measure>
specifications must resolve (or be resolvable) to non-negative lengths.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed extent and the supported extent is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value most distant from [0,0], i.e., of greatest extent, is used.
This rule for resolving closest supported value makes use of the nearest larger rather than nearest smaller supported distance.
The rationale for this difference in treatment is
that use of a larger extent ensures that the affected content will be contained in the region area without causing region overflow,
while use of a smaller extent makes region overflow more likely.
The tts:extent style is illustrated by the following example.
Example Fragment – Extent
<region xml:id="r1">
<style tts:extent="330px 122px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="after"/>
<style tts:textAlign="center"/>
</region>
...
<p region="r1">
'Tis the voice of the Lobster:<br/>
I heard him declare,<br/>
"You have baked me too brown,<br/>
I must sugar my hair."
</p>
|
Example Rendition – Extent |
10.2.17 tts:fontFamily
The tts:fontFamily attribute is used to specify a style property that
defines the font family from which glyphs are selected for glyph areas generated
by content flowed into a region.
Note:
In addition to applying to span, the computed value of this property
on a p element is used to resolve the value of the
style property associated with the tts:lineHeight attribute as specified in
10.2.27 tts:lineHeight.
If a computed value of the property associated with this attribute is not supported, then a
presentation processor must attempt to map the computed font family
to a supported font family that has similar typographic
characteristics, or, in the absence of such a mapping, it must
use the value default.
The tts:fontFamily style is illustrated by the following example.
Example Fragment – Font Family
<region xml:id="r1">
<style tts:extent="474px 146px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="center"/>
<style tts:textAlign="start"/>
<style tts:fontFamily="proportionalSansSerif"/>
</region>
...
<div region="r1">
<p>
"The time has come," the Walrus said,<br/>
"to talk of many things:
</p>
<p tts:textAlign="end" tts:fontFamily="monospaceSerif">
Of shoes, and ships, and sealing wax,<br/>
Of cabbages and kings,
</p>
<p>
And why the sea is boiling hot,<br/>
and whether pigs have wings."
</p>
</div>
|
Example Rendition – Font Family |
10.2.18 tts:fontKerning
The tts:fontKerning attribute is used to specify a style property that
determines whether font kerning is applied when positioning glyph areas.
| Values: |
"none" |
"normal"
|
| Initial: | normal |
| Applies to: |
span; see also Note
|
| Inherited: | yes |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | fontKerning derivation |
If the value of this attribute is normal, then kerning should be applied if kerning data is available.
If the value of this attribute is none, then kerning should not be applied whether or not kerning data is available.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value normal.
The tts:fontKerning style is illustrated by the following
example.
Example Fragment – Font Kerning
<p>
WAVE<br/>
<span tts:fontKerning="none">WAVE</span>
</p>
|
Example Rendition – Font Kerning |
10.2.19 tts:fontSelectionStrategy
The tts:fontSelectionStrategy attribute is used to specify a style property that
determines the strategy to be applied to glyph areas when selecting a font from a list of possible fonts during
presentation processing.
The presentation semantics of this property are those defined by [XSL-FO 1.1], §7.9.3,
where the set of selection criteria are extended to include the following properties:
When selecting among font resources that satisfy the font selection criteria, font resources that are referenced
by a font element have priority over application or system supplied
font resources.
Note:
In addition to applying to span, the computed value of this property
on a p element is used to resolve the value of the
style property associated with the tts:lineHeight attribute as specified in
10.2.27 tts:lineHeight.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value auto.
The tts:fontSelectionStrategy style is illustrated by the following
example.
Example Fragment – Font Selection Strategy
<p tts:fontFamily="font1,font2">
<span tts:fontSelectionStrategy="character">⃝</span>
</p>
|
Note:
In the above example, consider that the font resource associated with the font1 font family contains a glyph that
maps the single character , but does not contain a glyph that maps either the entire contextual character sequence
⃝ or the single character ⃝. Consider further that the font resource associated with
the font2 font family contains a mapping for the complete contextual character sequence and a mapping for the single character
⃝.
If the author is willing to accept the mapping for the complete contextual character sequence via font2, then the value
auto would be used (either explicitly or by initial value defaulting). However, if the author wishes that 
be mapped via font1 and ⃝ be mapped via font2, then the value character would
be specified. In this example, the author wishes the latter behavior, so specifies the value character.
10.2.20 tts:fontShear
The tts:fontShear attribute is used to specify a style property that
determines whether and how a shear transformation is applied to glyph areas.
For each glyph area to which this attribute applies, apply a 2D shear transformation
to the glyph area as specified by 10.4.5.3 Shear Calculations.
The tts:fontShear style is illustrated by the following example.
Example Fragment – Font Shear
<p region="horizontal">
<span tts:fontShear="16.78842%">三日坊主</span><br/>
<span tts:fontShear="50%">三日坊主</span><br/>
<span tts:fontShear="64.333%">三日坊主</span>
</p>
<p region="vertical">
<span tts:fontShear="16.78842%">三日坊主</span><br/>
<span tts:fontShear="50%">三日坊主</span><br/>
<span tts:fontShear="64.333%">三日坊主</span>
</p>
|
Example Rendition – Font Shear |
Example Fragment – Font Shear w/negative values
<p region="horizontal">
<span tts:fontShear="-16.78842%">三日坊主</span><br/>
<span tts:fontShear="-50%">三日坊主</span><br/>
<span tts:fontShear="-64.333%">三日坊主</span>
</p>
<p region="vertical">
<span tts:fontShear="-16.78842%">三日坊主</span><br/>
<span tts:fontShear="-50%">三日坊主</span><br/>
<span tts:fontShear="-64.333%">三日坊主</span>
</p>
|
Example Rendition – Font Shear w/negative values |
10.2.21 tts:fontSize
The tts:fontSize attribute is used to specify a style property
that defines the font size for glyphs that are selected for glyph areas
generated by content flowed into a region.
If a single <length> value is specified, then this length
equally determines the horizontal and vertical size of a glyph's EM square;
if two <length> values are specified, then the first determines the horizontal
size and the second determines the vertical size.
If horizontal and vertical sizes are expressed independently, then the
units of the <length> values must be the same.
Note:
A glyph's EM square is conventionally defined as the EM square of the font that contains the glyph. That is,
glyphs do not have an EM square that is distinct from their font's EM square.
Relative <length> values
that appear in this attribute, i.e., values expressed in percentage (%), cell (c), or EM (em) units,
are resolved in relation to a referenced 2-dimensional size value consisting of two components, a width component and
a height component. If the relative unit is a percentage, then the referenced value is either the computed value
of the font size of the nearest styled ancestor element or the computed cell size.
If the relative unit is cells (c), then the referenced value is the
computed cell size.
If the relative unit is EMs (em), then the referenced value is determined as if percentage units
were used, where 1em equals 100%.
When a single relative <length> value is specified, then
this <length> is resolved in terms of the height component of the referenced value;
when two relative
<length> values are specified,
the first <length> is resolved in terms of the width component of the referenced value and
the second <length> is resolved in terms of the height component of the referenced value.
Note:
Anamorphic font scaling, i.e., fonts scaled to independent (and distinct) horizontal and vertical sizes,
is expected to be used in a number of contexts, such as
when an author desires to synthesize a narrow or wide font face,
when an author desires to employ font sizes based on non-square cell units, etc.
Note:
Presentation processors are expected to scale glyphs so that the height of the EM square
as defined in the font resource matches the computed font size height, using an appropriate algorithm for the font. If anamorphic font scaling
is used, i.e. the computed font size width differs from the computed font size height, then presentation processors additionally are expected
to scale the EM square anamorphically by the ratio of the width to the height, and by extension, ensure that the presented glyphs are also
scaled by the same ratio.
The <length> value(s) used to express font size must be non-negative.
If the value of this attribute specifies a c unit on a <length> component,
then it is resolved in terms of the height (only) or (both) the width and height of a
cell length unit as defined by 10.3.22 <length>, which is to say, in terms of
the computed cell size.
Note:
For example, consider a paragraph (p) element P.
If the computed cell size is (24px,36px), and if
tts:fontSize="1c" is specified on P, then the computed value of tts:fontSize
resolves to (36px,36px), while if tts:fontSize="1c 1c" is specified on P,
then the computed value resolves to (24px,36px).
If the value of this attribute specifies an em unit on a <length> component,
then it is treated as if an equivalent percentage value were specified, where 1em is equal to 100%.
Note:
For example, consider a span element S, a child of a paragraph (p) element P.
If the computed value of tts:fontSize on P is (18px,24px), and if
tts:fontSize="1em" is specified on S, then this is equivalent to specifying 100%,
which resolves to (24px,24px). However, if tts:fontSize="1em 1em" is specified on S,
then this is equivalent to specifying 100% 100% which resolves to (18px,24px).
Note:
In addition to applying to span, the computed value of this property
on a p element is used to resolve the value of the
style property associated with the tts:lineHeight attribute as specified in
10.2.27 tts:lineHeight.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed font size and the supported font size is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value most distant from 0 (single length specification) or [0,0] (two length specifications) is used,
i.e., the largest font size, is used.
The tts:fontSize style is illustrated by the following example.
Example Fragment – Font Size
<region xml:id="r1">
<style tts:extent="299px 97px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="center"/>
<style tts:textAlign="center"/>
<style tts:fontFamily="proportionalSansSerif"/>
<style tts:fontSize="18px"/>
</region>
...
<p region="r1">
Then fill up the glasses<br/>
with treacle and ink,<br/>
Or anything else<br/>
that is <span tts:fontSize="24px">pleasant</span> to drink.
</p>
|
Example Rendition – Font Size |
10.2.21.1 Special Semantics of Font Size
The computed value of the property associated with this attribute consists of a 2-tuple
the entries of which denote the computed values of the width and height components of the font size respectively.
When applied to a span element
for which the computed value of tts:ruby is
either textContainer or text, then, when resolving the computed value
of tts:fontSize, the following special inheritance
rules apply.
A ruby text container, regardless of whether it is
explicit or implied,
does not inherit tts:fontSize from its parent.
Instead, if it is an explicit ruby text container and does not specify
a tts:fontSize attribute, or if it is an
implied ruby text container, then
a value equal to 50% of the computed value of tts:fontSize
on the nearest ancestor ruby container applies;
otherwise, the specified value applies.
If a span element for which the computed value of
tts:ruby is text does not specify a
tts:fontSize attribute, then it inherits the computed
value of tts:fontSize from its parent ruby text container,
regardless of whether it is an explicit or
implied ruby text container.
10.2.22 tts:fontStyle
The tts:fontStyle attribute is used to specify a style property that
defines the font style to apply to glyphs that are selected for glyph areas generated
by content flowed into a region, where the mapping from font
style value to specific font face or style parameterization is not determined
by this specification.
| Values: |
"normal" |
"italic" |
"oblique"
|
| Initial: | normal |
| Applies to: |
p,
span; see also Note
|
| Inherited: | yes |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | fontStyle derivation |
Use of the value oblique
denotes a shear transformation (at an unspecified
angle) in the inline progression direction.
Note:
In addition to applying to span, the computed value of this property
on a p element is used to resolve the value of the
style property associated with the tts:lineHeight attribute as specified in
10.2.27 tts:lineHeight.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value normal.
The tts:fontStyle style is illustrated by the following example.
Example Fragment – Font Style
<region xml:id="r1">
<style tts:extent="331px 84px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="after"/>
<style tts:textAlign="center"/>
<style tts:fontFamily="proportionalSansSerif"/>
</region>
...
<p region="r1">
In autumn, when the leaves are brown,<br/>
Take pen and ink, and <span tts:fontStyle="italic">write it down.</span>
</p>
|
Example Rendition – Font Style |
10.2.23 tts:fontVariant
The tts:fontVariant attribute is used to enable the selection
of typographic glyph variants for glyph areas generated by content flowed into a region.
Note:
In addition to applying to span, the computed value of this property
on a p element is used to resolve the value of the
style property associated with the tts:lineHeight attribute as specified in
10.2.27 tts:lineHeight.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value normal.
The tts:fontVariant style is illustrated by the following example.
Example Fragment – Font Variant
<region xml:id="r1">
<style tts:extent="376px 95px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="center"/>
<style tts:textAlign="center"/>
<style tts:fontFamily="proportionalSansSerif"/>
</region>
...
<p region="r1">
jumping <span tts:fontVariant="super">up</span> and
<span tts:fontVariant="sub">down</span> in an agony of terror.
</p>
|
Example Rendition – Font Variant |
10.2.24 tts:fontWeight
The tts:fontWeight attribute is used to specify a style property
that defines the font weight to apply to glyphs that are selected for glyph areas
generated by content flowed into a region, where the mapping from font
weight value to specific font face or weight parameterization is not determined
by this specification.
| Values: |
"normal" |
"bold"
|
| Initial: | normal |
| Applies to: |
p,
span; see also Note
|
| Inherited: | yes |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | fontWeight derivation |
Note:
In addition to applying to span, the computed value of this property
on a p element is used to resolve the value of the
style property associated with the tts:lineHeight attribute as specified in
10.2.27 tts:lineHeight.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value normal.
The tts:fontWeight style is illustrated by the following example.
Example Fragment – Font Weight
<region xml:id="r1">
<style tts:extent="376px 95px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="center"/>
<style tts:textAlign="center"/>
<style tts:fontFamily="proportionalSansSerif"/>
</region>
...
<p region="r1">
They told me you had been to her,<br/>
<span tts:fontWeight="bold">and mentioned me to him:</span><br/>
She gave me a good character<br/>
<span tts:fontWeight="bold">but said I could not swim.</span>
</p>
|
Example Rendition – Font Weight |
10.2.25 tts:ipd
The tts:ipd attribute is used to specify the
inline progression dimension, or, more succinctly, the ipd of an area generated by content flowed into a region.
Note:
The term inline progression dimension is interpreted in a writing mode relative manner
such that ipd always corresponds to a distance in the inline
progression direction. Therefore, in horizontal writing modes, ipd expresses a horizontal distance,
while, in vertical writing mode, ipd expresses a vertical distance,
where horizontal and vertical are always interpreted in an absolute sense.
If a <measure> is expressed as a <length> value, then it must be non-negative.
If a tts:ipd attribute is specified on a span element
and the computed value of the tts:display property that applies to that element is not inlineBlock,
then the semantics of tts:ipd only apply when computing the inline progression dimension of any applicable background color or image;
however, the dimensions of the content rectangles of the generated areas are not changed.
If a percentage value is used in a <length> expression of this attribute,
it is resolved with respect to the applicable absolute dimension of the generated area's containing area
(the nearest ancestor area).
Note:
A <length> expression used with this attribute is associated with
a specific, writing mode relative dimension, which is then resolved to an absolute dimension
in accordance with the applicable writing mode. If that absolute dimension is horizontal (vertical),
then a percentage value is resolved in terms of the same horizontal (vertical) absolute dimension of
the reference area (the nearest ancestor area).
The tts:ipd style is illustrated by the following example.
Example Fragment – Inline Progression Dimension
<p tts:fontSize="24px" tts:lineHeight="48px" tts:ipd="300px">
the woods are <span tts:display="inlineBlock" tts:ipd="150px">getting green</span> ...
</p>
|
Note:
In the above example, the tts:ipd attribute on the p element
assigns a fixed dimension to the width of the content rectangle of the block area generated by the paragraph, while
the tts:ipd attribute on the span element assigns a fixed
dimension to the width of the content rectangle of the inline block area generated by the span.
10.2.26 tts:letterSpacing
The tts:letterSpacing attribute is used to specify a style property that
increases or decreases the nominal distance between glyph areas.
Letter spacing has no affect at the beginning or ending of a line area, and must not
be applied to zero-advance glyphs. Furthermore, letter spacing must not cause normally connected glyphs,
e.g., as used in cursive scripts or with cursive fonts, to become disconnected.
Letter spacing is applied independently from kerning and justification. Depending upon the font(s) in use,
the script(s) being presented, and the capabilities of a presentation processor, either or both kerning and
justification may be applied in addition to letter spacing.
The value normal corresponds to specifying a <length> value of zero (0),
i.e., neither expand nor compress adjacent glyph spacing.
If a <length> value is expressed as a positive scalar,
then the spaces between adjacent glyphs are expanded by an additional amount equal to that scalar value.
If expressed as a negative scalar,
then the spaces between adjacent glyphs are compressed by an additional amount equal to that scalar value, possibly resulting
in overlapping glyph areas, up to a maximum amount that results an effective advance of zero (0).
If a computed value of the letter spacing associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the one-dimensional Euclidean distance between
the computed letter spacing and the supported letter spacing is minimized. If there are multiple closest supported values equally distant from
the computed value for a given edge, then the value least distant from 0 is used.
The tts:letterSpacing style is illustrated by the following
example.
Example Fragment – Letter Spacing
<p>
WAVE<br/>
<span tts:letterSpacing="20px">WAVE</span>
</p>
|
Example Rendition – Letter Spacing |
10.2.27 tts:lineHeight
The tts:lineHeight attribute is used to specify a style property that
defines the inter-baseline separation between line areas generated by content flowed into a region.
Note:
Exceptionally, the term height in the token lineHeight or the phrase line height refers to
the axis that corresponds with the block progression dimension of an associated line area, which is the vertical axis in
horizontal writing modes, but is the horizontal axis in vertical writing modes.
Note:
In addition to explicitly applying to p elements, the value of this
style property inherited by span element and anonymous span
descendants of a p element is used to compute the half leading of their generated
inline areas, about which see [XSL-FO 1.1], §4.5, and [CSS2], §10.8.1.
If the value of this attribute is normal, then the
used value of this style property is determined as follows:
Let P be the p element to which this style property applies.
Let FF be the computed value of the tts:fontFamily
style property of P.
Let FS be the computed value of the tts:fontSize style property of P.
Let F0 be the first font obtained when sequentially mapping each font family in FF to a set of available fonts,
where this set of available fonts is constrained as needed to satisfy the computed values of the
tts:fontSelectionStrategy,
tts:fontStyle,
tts:fontWeight, and
tts:fontVariant,
style properties of P.
If F0 is associated with font metrics that specify altitude A, depth D, and line gap G,
then set LH to the sum of scaled(A), scaled(D), and scaled(G),
where scaled(X) denotes font metric X scaled according to font size FS.
Note:
The altitude, depth, and line gap parameters referenced here are intended to correspond with the sTypoAscender,
-sTypoDescender, i.e., minus one (-1) times sTypoDescender, and sTypoLineGap fields of the OS/2 table
of an OpenType [OFF] font (or their equivalent in other font formats). Moreover, in general, the expressions
scaled(A) and scaled(D) are intended to correspond with the text-altitude and text-depth
area traits employed by [XSL-FO 1.1] when the value use-font-metrics is used with the associated properties
text-altitude and text-depth, respectively.
Otherwise, LH is considered to be implementation dependent; however, in the absence of implementation specific requirements,
LH is recommended to be set to 125% of FS.
Set the used value of this style property to LH.
Note:
If a content author wishes to avoid the possibility of different interpretations of normal, for example, due to differences in
the set of available fonts, then it is recommended that a
<length> value expression be used to explicitly specify line height value.
It is the intention of this specification that the above algorithm be compatible with [XSL-FO 1.1] and
[CSS2].
If specified as a <length>, then the length must
be non-negative.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed line height and the supported line height is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value most distant from 0, i.e., the largest line height, is used.
The tts:lineHeight style is illustrated by the following example.
Example Fragment – Line Height
<region xml:id="r1">
<style tts:extent="255px 190px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="center"/>
<style tts:textAlign="start"/>
<style tts:fontFamily="proportionalSansSerif"/>
<style tts:fontSize="16px"/>
<style tts:lineHeight="32px"/>
</region>
...
<p region="r1">
He thought he saw an elephant,<br/>
That practised on a fife:<br/>
He looked again, and found it was<br/>
A letter from his wife.<br/>
"At length I realise," he said,<br/>
"The bitterness of Life.
"</p>
|
Example Rendition – Line Height |
10.2.27.1 Special Semantics of Line Height
When the specified value of this attribute is normal, the computed value is the specified value; therefore,
when applying inheritance semantics, the value normal is the inherited value.
However, when this computed value is to be used to perform paragraph layout, it is further processed to obtain a
used value
as described above.
10.2.28 tts:lineShear
The tts:lineShear attribute is used to specify a style property that
determines whether and how a shear transformation is applied to each of the line areas generated
by a p element.
For each line area to which this attribute applies, apply a 2D shear transformation
to the line area as specified by 10.4.5.3 Shear Calculations.
The tts:lineShear style is illustrated by the following example.
Example Fragment – Line Shear
<region xml:id="right" tts:writingMode="tbrl" tts:displayAlign="center" .../>
<region xml:id="left" tts:writingMode="tbrl" tts:displayAlign="center" .../>
...
<div>
<p region="right" tts:lineShear="0%">
山の<span tts:ruby="container"><span tts:ruby="base">遭難</span><span
tts:ruby="text">そうなん</span></span><br/>
<span tts:ruby="container"><span tts:ruby="base">最多</span><span
tts:ruby="text">さいた</span></span><span tts:ruby="container"><span
tts:ruby="base">年</span><span tts:ruby="text">ねん</span></span>
</p>
<p region="left" tts:lineShear="16.67%">
山の<span tts:ruby="container"><span tts:ruby="base">遭難</span><span
tts:ruby="text">そうなん</span></span><br/>
<span tts:ruby="container"><span tts:ruby="base">最多</span><span
tts:ruby="text">さいた</span></span><span tts:ruby="container"><span
tts:ruby="base">年</span><span tts:ruby="text">ねん</span></span>
</p>
</div>
|
Example Rendition – Line Shear - Vertical Lines with Ruby |
Note:
In the above example, the yellow lines are decorations created by a particular presentation processor
to aid in debugging layout issues. Such lines are not part of a normative TTML presentation as defined by this specification.
Here, the decorations depict (1) boundaries of outer block areas
generated by region elements,
(2) boundaries of line area children of the outer block areas
generated by p elements, and
(3) boundaries of inline area children of line areas generated
by implied ruby text containers.
This example depicts how a shear (skew) transform is applied to each affected line area as a whole; however,
when line shear is to be applied to a line, then the available distance that can be allocated to the line, i.e., its maximum inline progression dimension
length prior to shear transformation, is reduced by B*sin(θ), where B is the block progression dimension
of the line area and θ is the shear angle, in order to fit the line into the content rectangle of the outer block area
of the paragraph.
10.2.29 tts:luminanceGain
The tts:luminanceGain attribute is used to determine the absolute luminance of a region when
its presentation requires a greater dynamic range than that provided by the [SRGB] color space,
and when that presentation requires an absolute luminance value.
Note:
Absolute luminance is determined by means of a gain multiplier applied to the absolute reference white
point luminance of 80 cd∙m-2 of the [SRGB] color space (and not the actual white luminance
of some output display device).
Without the ability to specify this gain, colors specified in the [SRGB] space cannot be
reliably composited with high-dynamic range (HDR) content intended for display with significantly
greater peak luminance, such as content that uses the perceptual quantizer electro-optical transfer function (PQ EOTF)
specified in [ITU BT.2100-1]. Specifically,
[SRGB] colors may appear too dim if they remain unscaled and the average luminance of the scene
exceeds 80 cd∙m-2; and
[SRGB] colors may appear too bright if they are uniformly scaled to an arbitrary large
luminance, such as 10,000 cd∙m-2.
The computed value associated with the tts:luminanceGain attribute applies to all pixels within the associated
region that require conversion from an
[SRGB] color value to an absolute luminance value. Any requirement to generate absolute luminance
pixel values is derived from the document processing context.
Note:
If an image whose processing generates absolute luminance pixel values, for example
one conforming to [PQ PNG], is placed in a region that also contains text or
images whose processing generates [SRGB] pixel values, and an absolute luminance output is required,
only the [SRGB] pixel values are transformed.
When applying tts:luminanceGain, the linear optical output values
(Cr, Cg, Cb) of the components of a pixel of a region are defined as
80 ∙ tts:luminanceGain ∙ (r, g, b), where (r, g, b) are the normalized linear [SRGB] components of the pixel.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
The tts:luminanceGain style is illustrated by the following example.
Example Fragment – tts:luminanceGain
<region xml:id="r1">
<style tts:extent="60% 20%"/>
<style tts:origin="10% 70%"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:luminanceGain="3.8"/>
</region>
<region xml:id="r2">
<style tts:extent="60% 20%"/>
<style tts:origin="10% 10%"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:luminanceGain="1.0"/>
</region>
...
<p region="r1">
The absolute luminance of the text in region one "r1" should be 3.8 times
brighter than the absolute luminance of the text in region two "r2".
</p>
<p region="r2">
Other text with the identity luminance adjustment (1.0).
</p>
|
An example of luminance adjustment calculations is described below.
Example – Absolute linear optical output calculation using tts:luminanceGain
Given tts:luminanceGain="1.5", the absolute linear optical output of the components of a rendered pixel with color rgb(218,165,32)
is (82.37, 42.21, 0.82) ≈ 80 ∙ 1.5 ∙((218/255)2.4, (165/255)2.4, (32/255)2.4),
where the exponent of 2.4 is the gamma correction applied by the [SRGB] EOTF.
|
Note:
As specified in 10.3.9 <color>, compositing regions of a rendered document instance
onto a target medium is typically performed using pixel components encoded using
the inverse EOTF of the target medium, as opposed to pixel components expressed in
linear light. As a result, the use of semi-transparent regions can yield
perceptually different results depending on the inverse EOTF used by the target
medium, especially when there is a large difference in luminance between the pixels of the
rendered document instance and the target medium.
Consequently, authors are encouraged to consider visual results involving semi-transparent elements.
10.2.30 tts:opacity
The tts:opacity attribute is used to specify a style property that
defines the opacity (or conversely, the transparency)
of marks associated with a region or an area generated by content flowed into a region.
When presented onto a visual medium, the opacity of the region is applied uniformly and on a linear scale
to all marks produced by content targeted to the
region after having applied any content element specific opacity to areas generated by that content.
The tts:opacity style is illustrated by the following example.
Example Fragment – Opacity
<p>
<span tts:opacity="1.00">And </span>
<span tts:opacity="0.75">then </span>
<span tts:opacity="0.50">there </span>
<span tts:opacity="0.25">were </span>
<span tts:opacity="0.00">none.</span>
</p>
|
Example Rendition – Opacity
|
10.2.31 tts:origin
The tts:origin attribute is used to specify the
x and y coordinates of the origin of a
region area with respect to the origin of the root container region.
If both tts:origin and tts:position attributes are
specified on an element and tts:position is a supported property,
then the tts:origin attribute must be ignored for the purpose of presentation processing.
If the value of this attribute consists of two <length> specifications,
then they must be interpreted as x and y coordinates, where the first specification
is the x coordinate, and the second specification is the y coordinate.
If the value of this attribute is auto, then the computed value
of the style property must be considered to be the same as the origin of the root container region.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed origin and the supported origin is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value least distant from [0,0], i.e., closest to the coordinate space origin, is used.
The tts:origin style is illustrated by the following example.
Example Fragment – Origin
<region xml:id="r1">
<style tts:origin="40px 40px"/>
<style tts:extent="308px 92px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="center"/>
<style tts:textAlign="center"/>
</region>
...
<p region="r1">
"To dine!" she shrieked in dragon-wrath.<br/>
"To swallow wines all foam and froth!<br/>
To simper at a table-cloth!"
</p>
|
Example Rendition – Origin |
10.2.32 tts:overflow
The tts:overflow attribute is used to specify a style property that
defines whether a region area is clipped or not if the descendant areas of the region overflow
its extent.
| Values: |
"visible" |
"hidden"
|
| Initial: | hidden |
| Applies to: |
region
|
| Inherited: | no |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | overflow derivation |
If the value of this attribute is visible, then content should
not be clipped outside of the affected region.
If the value is hidden, then content should
be clipped outside of the affected region.
Note:
Marks produced by content associated with a region's content rectangle may be rendered outside that
content rectangle, thus intersecting with the region's padding and border rectangles, without any affect from
the tts:overflow attribute. Such marks only become a candidate for region overflow when they would
extend outside the region's extent which is coincident with the region's border rectangle, which contains the
region's padding rectangle, which contains the region's content rectangle.
Note:
Unless a manual line break element br is used by the content author,
a paragraph of a given region will generate no more than one line area in that
region if the computed values of the tts:overflow and tts:wrapOption
style properties of the region are visible and noWrap,
respectively.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value hidden.
The tts:overflow style is illustrated by the following example.
Example Fragment – Overflow
<?xml version="1.0"?>
<tt xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling"
xml:lang="en" tts:extent="320px 240px">
<head>
<styling>
<style xml:id="s1" tts:backgroundColor="black" tts:padding="6px"/>
<style xml:id="s2" tts:color="red" tts:backgroundColor="white"
tts:wrapOption="noWrap" tts:fontFamily="proportionalSansSerif"
tts:fontSize="10px"/>
</styling>
<layout>
<region xml:id="r1" style="s1" tts:extent="100px 40px" tts:origin="20px 20px"
tts:overflow="visible"/>
<region xml:id="r2" style="s1" tts:extent="100px 40px" tts:origin="20px 180px"
tts:overflow="hidden"/>
</layout>
</head>
<body>
<div>
<p region="r1" style="s2">
"But wait a bit," the Oysters cried,<br/>
"Before we have our chat;
</p>
<p region="r2" style="s2">
For some of us are out of breath,<br/>
And all of us are fat!"
</p>
</div>
</body>
</tt>
|
Example Rendition – Overflow |
Note:
In the above example, the tts:noWrap is set to
noWrap to prevent automatic line wrapping (breaking);
if this were not specified, then overflow would occur in the block
progression direction as opposed to the inline progression direction.
10.2.33 tts:padding
The tts:padding attribute is used to specify padding (or inset)
space on one or more sides of a region or an area generated by content flowed into a region.
Note:
Padding is applied as an inset to a region area, which is to say, the content rectangle of a region area is reduced by
the presence of padding applied to the region.
If the value of this attribute consists of one <length> specification,
then that length applies to all edges of the affected areas. If the value
consists of two <length> specifications, then the first applies to the
before and after edges, and the second applies to the start and end edges.
If three <length> specifications are provided, then the first applies to the
before edge, the second applies to the start and end edges, and the third applies
to the after edge.
If four <length> specifications are provided, then they apply to before, end,
after, and start edges, respectively.
Note:
Percentage values are relative to the dimension of the region to which they apply. For example, if the before and after edges correspond
to the top and bottom edges of the region, as is the case for Latin text where tts:writingMode is equal to "lrtb",
then percentage values that apply to either of the two edges are relative to the height of the region. Conversely, if the before and after
edges correspond to the right and left edges of the region, as is the case for Japanese text where tts:writingMode is equal to
"tbrl", then percentage values that apply to either of the two edges are relative to the width of the region.
The <length> value(s) used to express padding must be non-negative.
If padding is applied to a span element, and content from that element
is divided across multiple line areas, then the specified padding must be applied at each line break boundary. In contrast,
within a single line area, if multiple inline areas are generated by the element, then the specified padding must be applied at
the first and (or) last generated inline area within a line area the inline progression order of the containing block level element.
Note:
The behavior of padding on a span element corresponds with the use of
a CSS box-decoration-break property with the value clone at line breaks and the value slice
at non-terminal, i.e., non-first and non-last, inline area boundaries, as defined by [CSS Fragmentation], §5.4.
If a percentage value is used in a <length> component of this attribute,
it is resolved as follows:
when applied to a region element, the percentage is relative to the applicable
absolute dimension of the region's resolved extent, unless that dimension is dependent on the
size of the content of the region, in which case the percentage resolves to the corresponding component of the applicable initial value;
when applied to all other elements, the percentage is relative to the corresponding
absolute dimension of the nearest ancestor area, unless that dimension is dependent on the
size of the content of that area, in which case the percentage resolves to the corresponding component of the applicable initial value.
Note:
Each <length> component used with this attribute is associated with
a specific, writing mode relative edge, which is then resolved to an absolute dimension
in accordance with the applicable writing mode. If that absolute dimension is horizontal (vertical),
then a percentage value is resolved in terms of the same horizontal (vertical) absolute dimension of
the reference area (either the root container region or the nearest ancestor area).
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the one-dimensional Euclidean distance between
the computed padding and the supported padding is minimized on a per-edge basis. If there are multiple closest supported values equally distant from
the computed value for a given edge, then the value least distant from 0, i.e., the least padding, is used.
The tts:padding style is illustrated by the following example.
Example Fragment – Padding on region
<region xml:id="r1">
<style tts:extent="446px 104px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="after"/>
<style tts:textAlign="center"/>
<style tts:padding="10px 40px"/>
</region>
...
<p region="r1" tts:backgroundColor="red">
Just the place for a Snark! I have said it twice:<br/>
That alone should encourage the crew.<br/>
Just the place for a Snark! I have said it thrice:<br/>
What I tell you three times is true.
</p>
|
When rendering an area to which padding applies, the background color that
applies to the area is rendered into the padded portion of the area.
Example Rendition – Padding on region
|
Note:
The above example depicts how padding is applied as an inset to a region area. In particular,
10px of padding is applied to the before (top) and after (bottom) edges, and
40px of padding is applied at the start (left) and end (right) edges. Subtracting
these from the extent of the region area results in the region's content rectangle having 366px width
and 84px height. The black background color of the region appears in the region's padding rectangle
while the red background color of the paragraph appears in the region's content rectangle.
Example Fragment – Padding on span
<region xml:id="r1">
<style tts:extent="446px 72px"/>
<style tts:displayAlign="center"/>
<style tts:textAlign="center"/>
<style tts:backgroundColor="green"/>
</region>
...
<p region="r1">
<span tts:backgroundColor="black" tts:color="white" tts:padding="0c 0.5c">
The crew was complete: it included a Boots--<br/>
A maker of Bonnets and Hoods--
</span>
</p>
|
When rendering spans to which padding applies, the padding applies to each generated line area independently.
Example Rendition – Padding on span
|
10.2.34 tts:position
The tts:position attribute is used as an alternative way to specify the position
of a region area with respect to a positioning rectangle.
If both tts:position and tts:origin attributes are
specified on an element and tts:position is a supported property,
then the tts:origin attribute must be ignored for the purpose of presentation processing.
A percentage value component for a horizontal position offset is relative to the width of the
positioning rectangle minus the width of the associated region.
A percentage value component for a vertical position offset is relative to the height of the
positioning rectangle minus the height of the associated region.
The following image depicts a position value "75% 50%", where the rectangle with dashed line denotes the positioning rectangle and the rectangle
with solid line denotes the region being positioned. In this case the region is positioned such that a vertical line located at 75% of its width coincides with
a vertical line located at 75% of the width of the positioning rectangle, and a horizontal line located at 50% of its height coincides with
a vertical line located at 50% of the width of the posititoning area.
Percentage Based Positioning
|
If specified on a region element, then, the positioning rectangle corresponds with the content rectangle of the root container region.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed position and the supported position is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value least distant from [0,0], i.e., closest to the coordinate space position, is used.
The tts:position style is illustrated by the following example, which positions a region so that it is
centered in the horizontal dimension and has a bottom edge offset at 10% above the bottom of the positioning rectangle in the vertical dimension,
where this offset is equal to 10% of the difference between the height of the positioning rectangle and the height of the region.
Example Fragment – Position
<tt tts:extent="640px 480px">
...
<region xml:id="r1">
<style tts:position="center bottom 10%"/>
<style tts:extent="308px 92px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="center"/>
<style tts:textAlign="center"/>
</region>
...
<p region="r1">
"To dine!" she shrieked in dragon-wrath.<br/>
"To swallow wines all foam and froth!<br/>
To simper at a table-cloth!"
</p>
|
Example Rendition – Position |
10.2.35 tts:ruby
The tts:ruby attribute is used to specify the application of ruby
styling.
| Values: |
"none" |
"container" |
"base" |
"baseContainer" |
"text" |
"textContainer" |
"delimiter"
|
| Initial: | none |
| Applies to: |
span
|
| Inherited: | no |
| Percentages: | N/A |
| Animatable: | none |
| Semantic basis: | ruby derivation |
If the value of this attribute is none, then no ruby semantics apply; otherwise, the ruby semantics enumerated by
Table 10-1 – Ruby Semantics Mapping apply.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value none.
For the purpose of presentation processing, the document processing context determines the
mode of presentation: normal or fallback.
When performing normal presentation processing of ruby text annotations, delimiter content must not generate any inline areas.
When performing fallback presentation of ruby, both delimiter and non-delimiter ruby (base and text) content must generate normal inline areas.
If a presentation processor does not support ruby presentation, then it must perform fallback ruby presentation.
When using tts:ruby, the following nesting constraints apply to a ruby container, that is,
if the computed value of tts:ruby of a span element is container, then:
the computed value of tts:ruby of all of its ancestor elements is none;
the computed value of tts:ruby of each of its child elements is not none;
the computed value of tts:ruby of its first child element is baseContainer
or base;
each of its text node children contain only <lwsp>,
which must be ignored for the purpose of presentation processing regardless of whether the computed value of the
xml:space attribute is preserve or not;
When using tts:ruby, the following nesting constraints apply to a ruby base container, that is,
if the computed value of tts:ruby of a span element is baseContainer, then:
the computed value of tts:ruby of its parent element is container;
the computed value of tts:ruby of each of its child elements is not none;
the computed value of tts:ruby of its first child element is base;
its preceding sibling is null (i.e., no preceding sibling);
each of its text node children contain only <lwsp>,
which must be ignored for the purpose of presentation processing regardless of whether the computed value of the
xml:space attribute is preserve or not;
When using tts:ruby, the following nesting constraints apply to a ruby text container, that is,
if the computed value of tts:ruby of a span element is textContainer, then:
the computed value of tts:ruby of its parent element is container;
the computed value of tts:ruby of each of its child elements is not none;
the computed value of tts:ruby of its first child element is either text or delimiter;
the computed value of tts:ruby of its preceding sibling is baseContainer or
textContainer;
the computed value of tts:ruby of no more than one of its siblings is textContainer;
each of its text node children contain only <lwsp>,
which must be ignored for the purpose of presentation processing regardless of whether the computed value of the
xml:space attribute is preserve or not;
When using tts:ruby, the following nesting constraints apply to ruby base content, that is,
if the computed value of tts:ruby of a span element is base, then:
the computed value of tts:ruby of its parent element is either container or
baseContainer;
its preceding sibling is either null (i.e., no preceding sibling) or the
computed value of tts:ruby of its preceding sibling is base;
if the computed value of tts:ruby of its parent element is container,
then the computed value of tts:ruby of no sibling is base;
the computed value of tts:ruby of no descendant element is not none;
none of its descendant elements is a br element;
each of its text node descendants does not contain U+2028 (LINE SEPARATOR) or U+2029 (PARAGRAPH SEPARATOR);
When using tts:ruby, the following nesting constraints apply to ruby text content, that is,
if the computed value of tts:ruby of a span element is text, then:
the computed value of tts:ruby of its parent element is either container or
textContainer;
its preceding sibling is either null (i.e., no preceding sibling) or the
computed value of tts:ruby of its preceding sibling is base,
text, or delimiter;
if the computed value of tts:ruby of its parent element is container,
then the computed value of tts:ruby of no sibling is text;
the computed value of tts:ruby of no descendant element is not none;
none of its descendant elements is a br element;
each of its text node descendants does not contain U+2028 (LINE SEPARATOR) or U+2029 (PARAGRAPH SEPARATOR);
When using tts:ruby, the following nesting constraints apply to a ruby fallback delimiter, that is,
if the computed value of tts:ruby of a span element is delimiter, then:
the computed value of tts:ruby of its parent element is either container or textContainer;
its preceding sibling is either null (i.e., no preceding sibling) or the
computed value of tts:ruby of its preceding sibling is base or
text;
the computed value of tts:ruby of exactly one sibling is delimiter;
if the computed value of tts:ruby is delimiter, then the
computed value of tts:ruby of no descendant element is not none;
none of its descendant elements is a br element;
each of its text node descendants does not contain U+2028 (LINE SEPARATOR) or U+2029 (PARAGRAPH SEPARATOR).
A validating content processor must treat a violation of any of the above constraints as an error.
For the purpose of presentation processing, the violation of any of these constraints should result in fallback (inline)
presentation of ruby text annotations, and, for content that violates some constraint, if that content is
a br element or a U+2028 (LINE SEPARATOR) or U+2029 (PARAGRAPH SEPARATOR) character,
then it should be mapped to a U+0020 (SPACE) character, or, if some other content, then ignored (not presented).
Note:
The above listed constraints are intended to be interpreted as specifying the following nesting model:
container
: base text
| base delimiter text delimiter
| baseContainer textContainer textContainer?
baseContainer
: base+
textContainer
: text+
| delimiter text+ delimiter
base | text | delimiter
: (#PCDATA | { span - tts:ruby })*
This model corresponds to the maximal content model for the ruby element defined by [Ruby], §2.1,
with the exception that rtc is effectively extended to permit the optional use of delimiters (rp):
ruby
: rb rt
| rb rp rt rp
| rbc rtc rtc?
rbc
: rb+
rtc
: rt+
| rp rt+ rp // extension to [Ruby]
Furthermore, this model is consistent with [Ruby], §2.6, regarding the constraint that
nesting of ruby containers is not supported (about which see the nesting constraint above).
Note:
While not supporting as many opportunities for markup minimization as allowed by [HTML],
the formulation of ruby annotation defined here does allow the following shorthands:
base text =
baseContainer
base
textContainer
text
base delimiter text delimiter =
baseContainer
base
textContainer
delimiter text delimiter
Given the content of base is B and the content of
text is T, then the expression base text could be represented variously in [HTML] as follows:
<ruby>B<rt>T</ruby>
<ruby>B<rt>T</rt></ruby>
<ruby><rb>B<rt>T</ruby>
<ruby><rb>B</rb><rt>T</ruby>
<ruby><rb>B</rb><rt>T</rt></ruby>
<ruby>B<rtc><rt>T</ruby>
<ruby>B<rtc><rt>T</rtc></ruby>
<ruby>B<rtc><rt>T</rt></ruby>
<ruby>B<rtc><rt>T</rt></rtc></ruby>
<ruby><rb>B<rtc><rt>T</ruby>
<ruby><rb>B<rtc><rt>T</rtc></ruby>
<ruby><rb>B</rb><rtc><rt>T</ruby>
<ruby><rb>B</rb><rtc><rt>T</rtc></ruby>
<ruby><rb>B</rb><rtc><rt>T</rt></ruby>
<ruby><rb>B</rb><rtc><rt>T</rt></rtc></ruby>
Whereas, in TTML2, the following alternative expressions are possible:
<span tts:ruby="container">
<span tts:ruby="base">B</span>
<span tts:ruby="text">T</span>
</span>
or its equivalent
<span tts:ruby="container">
<span tts:ruby="baseContainer">
<span tts:ruby="base">B</span>
</span>
<span tts:ruby="textContainer">
<span tts:ruby="text">T</span>
</span>
</span>
Use of tts:ruby to specify simple ruby annotation is illustrated by the following example.
Example Fragment – Simple Ruby
<span tts:ruby="container" tts:rubyAlign="spaceAround">
<span tts:ruby="base">利用許諾</span>
<span tts:ruby="text">ライセンス</span>
</span>
|
Example Rendition – Simple Ruby |
Use of tts:ruby to specify double-sided ruby annotation is illustrated by the following example.
Example Fragment – Double-sided Ruby
<span>
<span tts:ruby="container" tts:rubyAlign="spaceAround">
<span tts:ruby="baseContainer">
<span tts:ruby="base">東南</span>
</span>
<span tts:ruby="textContainer" tts:rubyPosition="before">
<span tts:ruby="text">とうなん</span>
</span>
<span tts:ruby="textContainer" tts:rubyPosition="after">
<span tts:ruby="text">たつみ</span>
</span>
</span>
<span>の方角</span>
</span>
|
Example Rendition – Double-sided Ruby |
Note:
The inter-character positioning mode for ruby annotations, such as used with bopomofo characters,
is not supported by this version of TTML due to lack of market requirements.
The tts:ruby attribute can also be used when the annotation uses Latin characters, e.g. for pinyin as described by [CLREQ] and
illustrated by the following example.
Example Fragment – Ruby with Pinyin Annotation
<p>
<span tts:ruby="container" tts:rubyAlign="center">
<span tts:ruby="base">周杰伦</span><span tts:ruby="text">Jay Chou</span>
</span>
|
Example Rendition – Ruby using Pinyin Annotation |
10.2.35.1 Special Semantics of Ruby Annotations
In the absence of implementation specific requirements, constraints on alignment between ruby text content and ruby base content that would potentially
give rise to overflowing a line area should be resolved by shifting ruby text content away from the start or end edge of the line area.
Note:
See [JLREQ], §3.3.8, Adjustments of Ruby with Length Longer than that of the Base Characters,
and [CSS Ruby], §5, Edge Effects, for further information.
In the absence of implementation specific requirements, ruby text content should be allowed to overhang ruby base content only when the
base text is in any of the following character classes as defined by [JLREQ], Appendix A, Character Classes:
hiragana
ideographic
punctuationMarks
Note:
See [JLREQ], §3.3.8, Adjustments of Ruby with Length Longer than that of the Base Characters for
further information.
When performing presentation processing,
isolated ruby content,
namely, ruby base content or ruby text content that is specified without a ruby base container or ruby text container, respectively,
is processed in such a manner as to imply the presence of an anonymous ruby base container and (or) anonymous ruby text container as required.
An implied ruby base container and (or)
implied ruby text container is required in order to generate and apply
implied or collective styling semantics to an inline block area which contains the inline areas generated by the
isolated ruby content.
An explicitly specified span element for which the computed value of
tts:ruby is baseContainer is referred to as
an explicit ruby base container;
likewise, an explicitly specified span element for which the computed value of
tts:ruby is textContainer is referred to as
an explicit ruby text container.
10.2.36 tts:rubyAlign
The tts:rubyAlign attribute is used to specify the position of ruby text within the inline area generated by the ruby text container annotation.
| Values: |
"start" |
"center" |
"end" |
"spaceAround" |
"spaceBetween" |
"withBase"
|
| Initial: | center |
| Applies to: |
span only if the computed value of tts:ruby is container
|
| Inherited: | yes |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | rubyAlign derivation |
When this attribute is specified on a
span element for which the computed value of tts:ruby is
container, then the ruby alignment semantics of the associated style property apply collectively to the inline areas generated by
the container's constituent ruby containers and ruby content.
Note:
A consequence of applying ruby alignment to a ruby container as a whole is that the ruby alignment that applies to
the container and its constituents is uniform (unvarying).
Let IR and IB be, respectively, the inline areas generated by (1) a ruby text container or
ruby text annotation and (2) an associated ruby base container or ruby base. Further, let NR
and NB , be, respectively, the number of glyph area descendants of these
inline areas.
If the value of this attribute is start, then the start edge of the first glyph area descendant
of IR
is aligned to the start edge of that inline area.
If the value is center, then excess whitespace
is equally distributed before and after the first and last ruby annotation glyph areas, respectively.
If the value of this attribute is end, then the end edge of the first glyph area descendant
of IR
is aligned to the end edge of that inline area.
If the value is spaceBetween, then excess whitespace
is equally distributed between each ruby annotation glyph area.
If the value is spaceAround, then excess whitespace
is equally distributed before and after each ruby annotation glyph area descendant.
If the value of this attribute is withBase, then, if NR and NB are equal,
the ith glyph area descendant of
IR is center aligned (horizontally or vertically) with the ith
glyph area descendant of IB;
otherwise (the number of ruby and base glyph areas are not equal), the semantics of center apply.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value center.
Note:
In this specification, ruby annotations in timed text applications are assumed to be narrow, since presentation space and available time are
often constrained. As a consequence, this version of TTML does not enable authors to control how spacing is distributed when the
ruby annotation is wider than its base text. This might be problematic for wide ruby annotations at the start or end edge of the line. In order
to avoid issues, authors are encouraged to use an appropriate value of tts:rubyAlign and (or) to split events containing wide
ruby annotations into multiple lines or even multiple events.
The tts:rubyAlign style is illustrated by the following example.
Example Fragment – Ruby Align
<p>
<span tts:ruby="container" tts:rubyAlign="start">
<span tts:ruby="base">自業自得</span><span tts:ruby="text">一二三</span>
</span>
<span tts:ruby="container" tts:rubyAlign="spaceAround">
<span tts:ruby="base">自業自得</span><span tts:ruby="text">一二三</span>
</span>
<br/>
<span tts:ruby="container" tts:rubyAlign="end">
<span tts:ruby="base">自業自得</span><span tts:ruby="text">一二三</span>
</span>
<span tts:ruby="container" tts:rubyAlign="spaceBetween">
<span tts:ruby="base">自業自得</span><span tts:ruby="text">一二三</span>
</span>
</p>
|
Example Rendition – Ruby Align |
10.2.37 tts:rubyPosition
The tts:rubyPosition attribute is used to specify the position of ruby text in the block progression dimension
with respect to its associated ruby base.
The style property associated with this attribute determines the relative positioning
of inline areas generated from ruby text containers and ruby text annotations with respect to their
associated base text containers and base text, where the directional semantics of
<annotation-position> apply.
When this attribute is specified on a
span element for which the computed value of tts:ruby is
textContainer, then the ruby position semantics of the associated style property apply collectively to the inline areas generated by
the explicit ruby text container and its constituent ruby text content.
When this attribute is specified on a
span element for which the computed value of tts:ruby is
text, then the ruby position semantics of the associated style property apply collectively to the inline areas generated by its
implied ruby text container and its own ruby text content.
This attribute must not be specified on a
span element for which the computed value of tts:ruby is
text when the parent of that span element is a
span element for which the computed value of
tts:ruby is textContainer.
If specified (on the former ruby text content), then it is considered an error
and must be ignored for the purpose of presentation processing.
The absolute position of the ruby text container or ruby text annotation is determined
in accordance to the computed value of the tts:writingMode style property of the region into which the affected content is placed;
in particular, the mappings defined enumerated by Table 10-2 – Absolute Ruby Position Semantics Mapping by Writing Mode apply as further defined
by [CSS Ruby], §4.1.
If two ruby text containers apply to the same ruby base container, then it is considered an error if
the used value of the property associated with this attribute would result in
both ruby text containers being placed on the same relative side of the ruby base container, in which case, the presentation semantics of
this property are not defined by this specification.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value before.
Table 10-2 – Absolute Ruby Position Semantics Mapping by Writing Mode| tts:rubyPosition | lrtb | rltb | tbrl | tblr |
|---|
before | over | over | right | left |
after | under | under | left | right |
Note:
When employing the Mongolian script set in vertical left-to-right lines, it may be desirable that the initial value assigned
to ruby position be after instead of outside, which is resolved to before for all non-final lines. In
this case, an author may redefine the default initial value for this attribute by including an element
<initial tts:rubyPosition="after"/> in a document's styling element.
The tts:rubyPosition style is illustrated by the following example, which illustrates
how the resolution of ruby position depends upon writing mode. Note that the example uses mono ruby as defined in [JLREQ].
Example Fragment – Ruby Position
<region xml:id="left" tts:writingMode="tblr"/>
<region xml:id="middle" tts:writingMode="lrtb"/>
<region xml:id="right" tts:writingMode="tbrl"/>
...
<p region="left">
<span tts:ruby="container" tts:rubyPosition="before">
<span tts:ruby="base">一</span>
<span tts:ruby="text">一</span>
</span>
<span tts:ruby="container" tts:rubyPosition="before">
<span tts:ruby="base">二</span>
<span tts:ruby="text">二</span>
</span>三四<br/>五六
<span tts:ruby="container" tts:rubyPosition="after">
<span tts:ruby="base">七</span>
<span tts:ruby="text">七</span>
</span>
<span tts:ruby="container" tts:rubyPosition="after">
<span tts:ruby="base">八</span>
<span tts:ruby="text">八</span>
</span>
</p>
<p region="middle">
<span tts:ruby="container" tts:rubyPosition="before">
<span tts:ruby="base">一</span>
<span tts:ruby="text">一</span>
</span>
<span tts:ruby="container" tts:rubyPosition="before">
<span tts:ruby="base">二</span>
<span tts:ruby="text">二</span>
</span>三四<br/>五六
<span tts:ruby="container" tts:rubyPosition="after">
<span tts:ruby="base">七</span>
<span tts:ruby="text">七</span>
</span>
<span tts:ruby="container" tts:rubyPosition="after">
<span tts:ruby="base">八</span>
<span tts:ruby="text">八</span>
</span>
</p>
<p region="right">
<span tts:ruby="container" tts:rubyPosition="before">
<span tts:ruby="base">一</span>
<span tts:ruby="text">一</span>
</span>
<span tts:ruby="container" tts:rubyPosition="before">
<span tts:ruby="base">二</span>
<span tts:ruby="text">二</span>
</span>三四<br/>五六
<span tts:ruby="container" tts:rubyPosition="after">
<span tts:ruby="base">七</span>
<span tts:ruby="text">七</span>
</span>
<span tts:ruby="container" tts:rubyPosition="after">
<span tts:ruby="base">八</span>
<span tts:ruby="text">八</span>
</span>
</p>
|
Example Rendition – Ruby Position |
Note:
In the above example, whitespace has been introduced into and around span elements as an aid to formatting;
in order to produce the example rendition as shown, it is necessary to remove that extra whitespace lest
it appear in the rendered output.
10.2.38 tts:rubyReserve
The tts:rubyReserve attribute is used to specify additional space to apply to affected line
areas in order to reserve sufficient room in the block progression dimension to contain inline areas generated by ruby text containers placed within
the bounds of the line areas.
Note:
An author may use the tts:rubyReserve attribute in order to ensure that consecutive baselines of line areas in a block area retain a fixed
placement regardless of the presence or absence of ruby text annotations.
If the value of this attribute is none, then no ruby space reservation applies; otherwise, the value of this attribute specifies a
position component followed by an optional length component.
If the position component is before, then the before leading of affected line areas is increased by the amount determined by the
used value of the length component.
If the position component is after, then the after leading of affected line areas is increased by the amount determined by the
used value of the length component.
If the position component is both, then the semantics of both the before and after positions apply
to each affected line area.
If the position component is outside, then, if the current block area contains exactly one line area, the both position
applies, otherwise the semantics of the before position applies to the first line area of the current block area
and the semantics of the after position apply to all other line areas of the current block area.
The length component is used to indirectly determine an amount by which the before and after leading of
affected line areas are increased. The computed value of the length component is considered to express the computed value of the style property associated
with the tts:fontSize attribute of hypothetical ruby text content were such content
actually present in a p element.
If no length component is specified, then it must be considered to be equal to the value of the style property associated with the
tts:fontSize attribute that would be inherited by
a hypothetical ruby text container or ruby text content, were such content actually present
in a p element, where the semantics of
10.2.21.1 Special Semantics of Font Size apply for the purpose of computing this inherited value.
If the <length> component is specified, it must be non-negative.
If the tts:rubyReserve is specified on a p element which contains
ruby text content, then the reserved leadings are applied to line areas as indicated above and then additional adjustments are
made to these leadings as needed to accommodate the presence of actual ruby text content.
Example Renditions – Ruby Reservetts:rubyReserve | No Ruby Present | Ruby Present |
|---|
none |  |  |
before |  |  |
after |  |  |
both |  |  |
outside |  |  |
10.2.39 tts:shear
The tts:shear attribute is used to specify a style property that
determines whether and how a shear transformation is applied to the outermost block area
generated by the affected element.
For each block area to which this attribute applies, apply a 2D shear transformation
to the block area as specified by 10.4.5.3 Shear Calculations.
The tts:shear style is illustrated by the following example.
Example Fragment – Shear
<region xml:id="right" tts:writingMode="tbrl" tts:displayAlign="center" .../>
<region xml:id="left" tts:writingMode="tbrl" tts:displayAlign="center" .../>
...
<div>
<p region="right" tts:shear="0%">
山の<br/>
最多<span tts:textCombine="all">1998</span>年
</p>
<p region="left" tts:shear="16.67%">
山の<br/>
最多<span tts:textCombine="all">1998</span>年
</p>
</div>
|
Example Rendition – Shear - Vertical Lines with Tate-Chu-Yoko |
Note:
In the above example, the yellow lines are decorations created by a particular presentation processor
to aid in debugging layout issues. Such lines are not part of a normative TTML presentation as defined by this specification.
Here, the decorations depict (1) boundaries of outer block areas
generated by region elements and
(2) boundaries of line area children of the outer block areas
generated by p elements.
This example depicts how a shear (skew) transform is applied to the affected outer block areas
generated by p elements; however,
when shear is to be applied to an outer block area, then the available distance that can be allocated to the block area,
i.e., its maximum inline progression dimension length prior to shear transformation, is reduced by B*sin(θ),
where B is the block progression dimension of the outer block area and θ is the
shear angle, in order to fit the block area into the content rectangle of the immediate ancestor block area of the paragraph.
10.2.40 tts:showBackground
The tts:showBackground attribute is used to specify
constraints on when the background of a region is intended to be
presented.
Note:
The background of a region includes marks produced by (1) a background color and (or) (2) a background image,
if either apply to the region.
If a region is not temporally active, then its background is not rendered; however, if it is
temporally active, then
if the value of this attribute is whenActive, then the region's background is rendered only when
content is selected into the region, where that content is also temporally active;
otherwise, if the value of this attribute is always, then the region's background is rendered irrespective of
whether content is selected into the region.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value always.
The tts:showBackground style is illustrated by the following example.
Example Fragment – Show Background
<region xml:id="r1">
<style tts:origin="0px 0px"/>
<style tts:extent="265px 100px"/>
<style tts:backgroundColor="black"/>
<style tts:showBackground="always"/>
<style tts:color="white"/>
<style tts:displayAlign="before"/>
<style tts:textAlign="start"/>
</region>
<region xml:id="r2">
<style tts:origin="205px 60px"/>
<style tts:extent="290px 100px"/>
<style tts:backgroundColor="red"/>
<style tts:color="white"/>
<style tts:displayAlign="before"/>
<style tts:textAlign="end"/>
<style tts:showBackground="whenActive"/>
</region>
|
10.2.41 tts:textAlign
The tts:textAlign attribute is used to specify a style property that
defines how inline areas are aligned within a containing block area in the inline progression
direction.
| Values: |
"left" |
"center" |
"right" |
"start" |
"end" |
"justify"
|
| Initial: | start |
| Applies to: |
p
|
| Inherited: | see prose |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | textAlign derivation |
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value start.
The tts:textAlign style is illustrated by the following examples.
Example Fragment – Text Align
<region xml:id="r1">
<style tts:extent="355px 43px"/>
<style tts:origin="0px 0px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:textAlign="start"/>
</region>
<region xml:id="r2">
<style tts:extent="355px 43px"/>
<style tts:origin="0px 47px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:textAlign="end"/>
</region>
...
<p region="r1">
Beware the Jabberwock, my son!<br/>
The jaws that bite, the claws that catch!
</p>
<p region="r2">
Beware the Jubjub bird, and shun<br/>
The frumious Bandersnatch!
</p>
|
Example Rendition – Text Align |
Note:
The text alignment of the last line area of the last block area generated by a p element
follows the semantics of the text-align-last property with a value of relative per [XSL-FO 1.1], §7.16.10.
10.2.42 tts:textCombine
When a vertical writing mode applies, the tts:textCombine attribute is used to specify a style property that
applies to glyph areas generated by content flowed into a region, and which
determines whether and how multiple glyph areas are combined horizontally so that they
fit within the block progression dimension of a single line of the surrounding vertical text.
If a horizontal writing mode applies, then this property is ignored
for the purpose of presentation processing.
Combination processing may make use of one or more techniques to obtain the goal of visual combination into an EM square of the surrounding vertical text.
For example, half-width variant forms may be selected, a ligature may be selected, a smaller font size may be applied, etc. At a minimum, an
implementation that supports this style property must be able to select half-width variant forms if available. If none of these techniques are
able to achieve the target dimension along the block progression dimension of the containing line area, then this dimension of the containing line area may be increased if
permitted by the line stacking strategy in effect.
If the specified value of this attribute is none, then no combination processing applies.
If the specified value of this attribute is all, then all affected characters should be combined.
Combination applies after all affected characters have been processed as if a horizontal writing mode applied. In particular, bidirectional processing, ligatures, glyph subtitutions or combination of Unicode combining characters if used is applied before the combination process specified by the tts:textCombine attribute.
Combination must not cross an element boundary, a bidirectional boundary, or a non-glyph area boundary.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value none.
Note:
This version of TTML does not define any semantics for the tts:textCombine attribute
in the context of a ruby container. As a consequence, a content author is advised to
not expect any specific behavior by a
conformant presentation processor
when a tts:textCombine attribute is used in the context of a ruby container.
The tts:textCombine style is illustrated by the following example.
Example Fragment – Text Combine
<p region="tbrlLeft">あい
<span tts:textCombine="none">AB34</span>三四
</p>
<p region="tbrlRight">あい
<span tts:textCombine="all">AB34</span>三四
</p>
|
Example Rendition – Text Combine |
Note:
In the above example, the rightmost region depicts the use of the all value, where
the presentation processor has applied scaling to half-width variant glyphs of the affected characters, thus allowing the combined text to fit within
the same size EM square as the surrounding vertical text.
10.2.43 tts:textDecoration
The tts:textDecoration attribute is used to specify a style property that
defines a text decoration effect to apply to glyph areas
that are generated by content flowed into a region.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value none.
Note:
The syntax used above in defining the value of this property is based on the
value component syntax defined in [CSS2], §1.4.2.1. In essence,
one or more of the values separated by || may appear in the property
value in any order, such as "noUnderline overline lineThrough".
Note:
Specifying the value "none" is equivalent to specifying "noUnderline noLineThrough noOverline".
The tts:textDecoration style is illustrated by the following example.
Example Fragment – Text Decoration
<region xml:id="r1">
<style tts:extent="385px 82px"/>
<style tts:origin="0px 0px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:padding="5px 2px"/>
<style tts:textDecoration="underline"/>
</region>
...
<p region="r1">
The sea was wet<span tts:textDecoration="noUnderline"> as </span>wet
<span tts:textDecoration="noUnderline">
could be,<br/>
The sand was dry as dry.<br/>
<span tts:textDecoration="lineThrough">There weren't any</span>
You <span tts:textDecoration="lineThrough">couldn't</span>
could not see a cloud<br/>
Because no cloud was in the sky.
</span>
</p>
|
Example Rendition – Text Decoration |
10.2.43.1 Special Semantics of Text Decoration
The computed value of the property associated with this attribute consists of a 3-tuple,
where each entry denotes, respectively, whether an underline, line through, or overline
decoration is to be applied to the affected text.
Furthermore, when applying inheritance semantics, each of these entries is considered to
be inherited separately from the others.
Note:
For example, if the computed value of tts:textDecoration that applies to a div (division) element
is the tuple (noUnderline, lineThrough, overline) and a
p (paragraph) element child of that div specifies tts:textDecoration="noLineThrough", then
the aggregate computed value that applies to the p element is (noUnderline, noLineThrough, overline), which value
is then inherited by children of the p element.
10.2.44 tts:textEmphasis
The tts:textEmphasis attribute is used to specify a style property that
defines a text emphasis effect to apply to glyph areas
that are generated by content flowed into a region.
If no emphasis style is specified,
then the emphasis style must be interpreted as if a style of auto were specified.
If no emphasis color is specified,
then the emphasis color must be interpreted as if a color of current were specified.
If no emphasis position is specified,
then the emphasis position must be interpreted as if a position of outside were specified.
Note:
When employing the Mongolian script set in vertical left-to-right lines, it may be desirable that the initial value assigned
to emphasis position be after instead of outside, which is resolved to before for all non-final lines. In
this case, an author may redefine the default initial value for this attribute by including an element
<initial tts:textEmphasis="none transparent after"/> in a document's styling element.
The tts:textEmphasis style is illustrated by the following example.
Example Fragment – Text Emphasis
<p>
<span tts:textEmphasis="filled circle before">花</span>
<span tts:textEmphasis="filled dot before">よ</span>
<span tts:textEmphasis="filled sesame before">り</span>
<span tts:textEmphasis="open circle before">だ</span>
<span tts:textEmphasis="open dot before">ん</span>
<span tts:textEmphasis="open sesame before">ご</span>
<br/>
<span tts:textEmphasis="filled circle after">花</span>
<span tts:textEmphasis="filled dot after">よ</span>
<span tts:textEmphasis="filled sesame after">り</span>
<span tts:textEmphasis="open circle after">だ</span>
<span tts:textEmphasis="open dot after">ん</span>
<span tts:textEmphasis="open sesame after">ご</span>
</p>
|
Example Rendition – Text Emphasis |
10.2.45 tts:textOrientation
The tts:textOrientation attribute is used to specify a style property that
defines a text orientation to apply to glyph areas generated
by content flowed into a region to which a vertical writing mode applies.
| Values: |
"mixed" |
"sideways" |
"upright"
|
| Initial: | mixed |
| Applies to: |
span; see also Note
|
| Inherited: | yes |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | textOrientation derivation |
The presentation semantics of this style property apply only when a vertical
writing mode applies; therefore, if a horizontal writing mode applies, this style
property has no effect.
In the following, glyph areas associated with content characters are described in terms of whether
they are rotated or not rotated in vertical writing modes, where this determination is made in accordance with the Vertical_Orientation
of each content character as determined by [UTR50].
If the value of this attribute is mixed, then rotated glyph areas are set sideways
and non-rotated glyph areas are set upright, where sideways means rotated 90° clockwise,
and where upright means not rotated.
Note:
According to [UTR50], visual rotation of a glyph areas may occur through either the substitution
of a rotated glyph areas or by performing an affine rotation transformation on the
glyph areas's outline (or raster image),
where the determination of which of these applies depends on the specific font used during presentation processing.
If the value of this attribute is sideways, then all glyph areas
are rotated 90° clockwise.
If the value of this attribute is upright, then all characters are considered
to have a vertical orientation of U, in which case no
glyph areas are rotated. In this case the
(potential) substitution of rotated glyph areas
and the application of an affine rotation transformation
are disabled, and the glyph area rendered
is the non-rotated form.
In addition, for purposes of bidirectional processing, this value causes all
affected characters to be treated as strong left-to-right, i.e., to be treated as if
a tts:direction of ltr and tts:unicodeBidi of
override were applied.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value mixed.
The tts:textOrientation style is illustrated by the following
example.
Example Fragment – Text Orientation
<region xml:id="vertical" tts:writingMode="tblr"/>
...
<p region="vertical">
<span tts:textOrientation="mixed">A</span>
<span tts:textOrientation="upright">B</span>
</p>
|
Example Rendition – Text Orientation |
10.2.46 tts:textOutline
The tts:textOutline attribute is used to specify a style property that
defines a text outline effect to apply to glyphs that are selected for glyph areas generated
by content flowed into a region.
The value of this attribute consists of an optional <color> term
followed by one or two <length> terms. If a color term is
present, then it denotes the outline color; if no color term is
present, the computed value of the tts:color applies. The first
length term denotes the outline thickness and the second length
term, if present, indicates the blur radius.
When a relative <length> value is specified for outline thickness or blur radius,
then it is resolved in terms of the height component of the referenced font size or computed cell size.
The <length> value(s) used to express thickness and blur radius must be non-negative.
If no blur radius is specified, i.e., only one <length> term is present,
then the computed value of 0px applies.
Note:
When a <length> expressed in
cells is used in a tts:textOutline value,
the cell's height applies.
For example, if text outline thickness is specified as 0.1c, the cell resolution
is 20 by 10, and the extent of the root container region is 640 by 480, then the
outline thickness will be a nominal 480 / 10 * 0.1 pixels, i.e., 4.8px,
without taking into account rasterization effects.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value none.
The tts:textOutline style is illustrated by the following
example.
Example Fragment – Text Outline
<region xml:id="r1">
<style tts:backgroundColor="transparent"/>
<style tts:color="yellow"/>
<style tts:textOutline="black 2px 0px"/>
<style tts:fontFamily="proportionalSansSerif"/>
<style tts:fontSize="24px"/>
</region>
...
<p>
How doth the little crocodile<br/>
Improve its shining tail,<br/>
And pour the waters of the Nile<br/>
On every golden scale!<br/>
How cheerfully he seems to grin,<br/>
How neatly spreads his claws,<br/>
And welcomes little fishes in,<br/>
With gently smiling jaws!
</p>
|
Example Rendition – Text Outline |
10.2.47 tts:textShadow
The tts:textShadow attribute is used to specify a style property that
defines one or more text shadow decorations to apply to glyphs that are selected for glyph areas generated
by content flowed into a region.
If multiple text shadows apply, then they are drawn in the specified order immediately prior to drawing the
glyph area to which they apply.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value none.
Example Fragment – Text Shadow
<style xml:id="s1"
tts:backgroundColor="black"
tts:color="white"
tts:lineHeight="125%"
tts:textAlign="center"/>
...
<p style="s1">
<span tts:padding="1%">
I serve it with greens in those
<span tts:textShadow="10% -20% 5% lime">shadowy scenes,</span><br/>
And I use it for striking a light:</span>
</p>
|
Example Rendition – Text Shadow
|
10.2.48 tts:unicodeBidi
The tts:unicodeBidi attribute is used to specify a style property that
defines an explicit directional embedding, override or isolate according to
the Unicode bidirectional algorithm.
| Values: |
"normal" |
"embed" |
"bidiOverride" |
"isolate"
|
| Initial: |
normal
|
| Applies to: |
p,
span
|
| Inherited: | no |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | unicodeBidi derivation |
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value normal.
The tts:unicodeBidi style is illustrated by the following example.
Example Fragment – Unicode Bidirectionality
<region xml:id="r1">
<style tts:extent="265px 84px"/>
<style tts:padding="5px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="after"/>
<style tts:textAlign="center"/>
</region>
...
<p region="r1">
Little birds are playing<br/>
Bagpipes on the shore,<br/>
<span tts:unicodeBidi="bidiOverride" tts:direction="rtl">where the tourists snore.</span>
</p>
|
Example Rendition – Unicode Bidirectionality
|
10.2.49 tts:visibility
The tts:visibility attribute is used to specify a style property that
defines whether generated areas are visible or not when rendered on a visual
presentation medium.
The tts:visibility style has no affect on content layout or
composition, but merely determines whether composed content is visible or not.
If the computed value of the property associated with this attribute is visible, then areas generated by
this element are rendered visible when presented on a visual medium. If the computed value is hidden, then they are not rendered visible,
i.e., they are hidden; notwithstanding the foregoing, a descendant element of a hidden element is rendered visible if the computed value of this property
is visible on the descendant.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value visible.
The tts:visibility style is illustrated by the following example.
Example Fragment – Visibility
<region xml:id="r1">
<style tts:extent="398px 121px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style/>
</region>
...
<p region="r1" dur="4s">
<span tts:visibility="hidden">
<set begin="1s" tts:visibility="visible"/>
Curiouser
</span>
<span tts:visibility="hidden">
<set begin="2s" tts:visibility="visible"/>
and
</span>
<span tts:visibility="hidden">
<set begin="3s" tts:visibility="visible"/>
curiouser!
</span>
</p>
|
Example Rendition – Visibility
|
|
|
|
10.2.50 tts:wrapOption
The tts:wrapOption attribute is used to specify a style property that
defines whether or not automatic line wrapping (breaking) applies within the context of
the affected element.
| Values: |
"wrap" |
"noWrap"
|
| Initial: | wrap |
| Applies to: |
span
|
| Inherited: | yes |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | wrapOption derivation |
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value wrap.
The tts:wrapOption style is illustrated by the following example.
Example Fragment – Wrap Option
<region xml:id="r1">
<style tts:extent="192px 117px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:displayAlign="after"/>
<style tts:overflow="hidden"/>
<style tts:wrapOption="noWrap"/>
</region>
...
<p>
I'll tell thee everything I can:<br/>
There's little to relate.<br/>
I saw an aged aged man,<br/>
A-sitting on a gate.
</p>
|
Example Rendition – Wrap Option |
10.2.51 tts:writingMode
The tts:writingMode attribute is used to specify a style property that
defines the block and inline progression directions to be used for the purpose of
stacking block and inline areas within a region area.
| Values: |
"lrtb" |
"rltb" |
"tbrl" |
"tblr" |
"lr" |
"rl" |
"tb"
|
| Initial: | lrtb |
| Applies to: |
region
|
| Inherited: | no |
| Percentages: | N/A |
| Animatable: | discrete |
| Semantic basis: | writingMode derivation |
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the value lrtb.
Note:
A writing mode for which the inline progression direction is left-to-right or right-to-left is referred to
as a horizontal writing mode, while a writing mode for which the inline progression direction is
top-to-bottom is referred to as a vertical writing mode.
The tts:writingMode style is illustrated by the following example.
Example Fragment – Writing Mode
<tt ... xml:lang="en">
...
<region xml:id="top" tts:origin="10% 10%" tts:extent="55% 10%"
tts:writingMode="rltb"/>
<region xml:id="right" tts:origin="70% 10%" tts:extent="10% 80%"
tts:writingMode="tbrl"/>
...
<p region="top"><span xml:lang="ar">نشاط التدويل،</span> W3C</p>
<p region="right">hello <span xml:lang="ja">みなさん、<br/>こんにちは</span></p>
...
</tt>
|
Example Rendition – Writing Mode |
Note:
In this example, the natural language of textual content is identified using
multiple xml:lang attributes. While
not technically required to demonstrate the tts:writingMode attribute,
the use of explicit language identification is recommended in markup that contains
content in multiple natural languages.
10.2.52 tts:zIndex
The tts:zIndex attribute is used to specify a style property that
defines the front-to-back ordering of region areas in the case that they overlap.
If two areas are associated with the same Z-index value, then, if those areas
overlap in space, the area(s) generated by lexically subsequent elements must be
rendered over area(s) generated by lexically prior elements, where lexical
order is defined as the postorder traversal of a document instance.
The semantics of the value auto are those defined by
[XSL-FO 1.1], §7.30.18, where the tt element
is considered to establish the root stacking context.
If a computed value of the property associated with this attribute is not supported,
then a presentation processor must use the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed z-index and the supported z-index is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value least distant from 0, i.e., closest to the base stack level of the current stacking context, is used.
The tts:zIndex style is illustrated by the following example.
Example Fragment – Z Index
<region xml:id="r1">
<style tts:origin="0px 0px"/>
<style tts:extent="400px 100px"/>
<style tts:padding="5px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:zIndex="0"/>
</region>
<region xml:id="r2">
<style tts:origin="100px 60px"/>
<style tts:extent="400px 100px"/>
<style tts:padding="5px"/>
<style tts:backgroundColor="red"/>
<style tts:color="white"/>
<style tts:textAlign="end"/>
<style tts:zIndex="1"/>
</region>
<region xml:id="r3">
<style tts:origin="0px 120px"/>
<style tts:extent="400px 100px"/>
<style tts:padding="5px"/>
<style tts:backgroundColor="black"/>
<style tts:color="white"/>
<style tts:zIndex="2"/>
</region>
<region xml:id="r4">
<style tts:origin="100px 180px"/>
<style tts:extent="400px 100px"/>
<style tts:padding="5px"/>
<style tts:backgroundColor="red"/>
<style tts:color="white"/>
<style tts:textAlign="end"/>
<style tts:zIndex="3"/>
</region>
...
<p region="r1">
I passed by his garden, and marked, with one eye,<br/>
How the Owl and the Panther were sharing a pie.
</p>
<p region="r2">
The Panther took pie-crust, and gravy, and meat,<br/>
While the Owl had the dish as its share of the treat.
</p>
<p region="r3">
When the pie was all finished, the Owl, as a boon,<br/>
Was kindly permitted to pocket the spoon:
</p>
<p region="r4">
While the Panther received knife and fork<br/>
with a growl,<br/>
And concluded the banquet by...
</p>
|
Example Rendition – Z Index |
10.2.53 tta:gain
The tta:gain attribute is used to specify an audio style property that
determines a gain multiplier to be applied to the applicable audio content during
the active duration of the element on which this attribute is specified.
If the specified value of this attribute is not contained in the interval [-1,1],
then the computed value of the property associated with this attribute is clamped to this bounded interval.
If the computed value of the property associated with this attribute is negative, then gain is set to
the absolute value of the computed value and a phase inversion is applied.
If gain is 0, then active audio content is fully muted. If gain is 1, then the amplitude of active
audio content is not modified. Otherwise, gain is greater than 0 and less than 1, in which case a relative attenuation
is applied to the combined active audio content, where this attenuation is linear over the interval [0,1].
The tta:gain style is illustrated by the following example.
Example Fragment – Gain
<div>
<audio src="#track1" tta:gain="0.5"/>
<p tta:gain="0.3">
<audio src="#track2" tta:gain="0.8"/>
</p>
</div>
|
Note:
In this example, two audio sources, track1 and track2, are active.
The div element provides one active audio track as an output to its child p,
and this child p combines a second active audio track to form the output to its children.
Furthermore, distinct gains are specified on each source audio as well as on the output of p,
such that the final output is 0.3[0.5(track1) + 0.8(track2)].
Note:
The semantics of the style property represented by this attribute are based upon
that defined by [WEBAUDIO], §2.7, where the element on which the property
is specified generates a GainNode in the audio graph, whose gain
attribute has the same computed value, and whose input for a
content element that is not an audio generating element
is the sum of the audio output of this element's parent element and the combined (linearly summed) audio
output of all child audio generating elements; otherwise, i.e., for an audio generating element, the input
is the element's generated audio.
10.2.54 tta:pan
The tta:pan attribute is used to specify an audio style property that
determines a stereoscopic pan vector to be applied to the applicable audio content during
the active duration of the element on which this attribute is specified.
If the specified value of this attribute is not contained in the interval [-1,1],
then the computed value of the property associated with this attribute is clamped to this bounded interval.
If the computed value of the property associated with this attribute is negative, then the pan direction is to the left of center.
If the pan value is 0, then the stereoscopic directionality of active audio content is not modified, otherwise, the pan value is positive,
in which case the pan direction is to the right of center, where a value of -1 designates fully left, and a value
of 1 designates fully right.
The tta:pan style is illustrated by the following example.
Example Fragment – Pan
<div>
<audio src="#track1" tta:pan="0.5"/>
<p tta:pan="0.3">
<audio src="#track2" tta:pan="0.8"/>
</p>
</div>
|
Note:
In this example, two audio sources, track1 and track2, are active.
The div element provides one active audio track as an output to its child p,
and this child p combines a second active audio track to form the output to its children.
Furthermore, distinct pans are specified on each source audio as well as on the output of p,
such that the final output pan is 0.3[0.5(track1) + 0.8(track2)].
Note:
The semantics of the style property represented by this attribute are based upon
that defined by [WEBAUDIO], §2.21, where the element on which the property
is specified generates a StereoPannerNode in the audio graph, whose pan
attribute has the same computed value, and whose input for a
content element that is not an audio generating element
is the sum of the audio output of this element's parent element and the combined (linearly summed) audio
output of all child audio generating elements; otherwise, i.e., for an audio generating element, the input
is the element's generated audio.
10.2.55 tta:pitch
The tta:pitch attribute is used to specify an audio style property that
determines speech pitch when speech synthesis is enabled for the affected content
| Values: |
<pitch>
|
| Initial: | 0% |
| Applies to: |
span
|
| Inherited: | yes |
| Percentages: | relative to input audio pitch |
| Animatable: | none |
The tta:pitch style is illustrated by the following example.
Example Fragment – Pitch
<p>Apply relative pitch adjustment to <span tta:pitch="+10hz">this</span> word.</p>
|
Note:
The semantics of the style property represented by this attribute are derived from
that defined by [SSML 1.0] §3.2.4 where the equivalent of a prosody
element with a pitch attribute equal to the computed value is applied to the spoken
character content.
10.2.56 tta:speak
The tta:speak attribute is used to specify an audio style property that
determines whether speech synthesis is enabled for the affected content, and, if enabled, which rate of speech to apply.
| Values: |
"none" |
"normal" |
"fast" |
"slow"
|
| Initial: | none |
| Applies to: |
span
|
| Inherited: | yes |
| Percentages: | N/A |
| Animatable: | none |
If the value of this attribute is none, then speech synthesis is disabled for the affected content. Otherwise,
if the value of this attribute is normal, fast, or slow, then speech synthesis is enabled at a
normal, fast, or slow speech rate, respectively.
The tta:speak style is illustrated by the following example.
Example Fragment – Speak
<p>Speak <span tta:speak="normal">this</span> word.</p>
|
Note:
The semantics of the style property represented by this attribute are derived from
that defined by [SSML 1.0] §3.2.4 where the equivalent of a prosody
element with a rate attribute equal to the computed value is applied to the spoken
character content.
10.2.56.1 Special Semantics of Speak
If the computed value of tta:speak on some span element or
anonymous span S is not none, then
if S has a child audio element A
and A does not reference any source audio resource by means of either
reference data embedding or sourced data embedding,
then a reference to the speech data resource with a
reference data embedding is implied;
if no child of S is an audio element and
no ancestor of S is an audio generating element for which a referenced
audio resource source is the speech data resource,
then a child audio element that references the
speech data resource with a reference data embedding
is implied.
The following example shows the first of the above two cases.
Example Fragment – Speak with Implied Audio Source
<span tta:speak="normal">
<audio/>
spoken text
</span>
|
The following example illustrates the second of the above cases.
Example Fragment – Speak with Implied Audio
<span tta:speak="normal">
spoken text
</span>
|
The following fragment shows the equivalent result that would obtain from applying the above special semantics to each of the two prior examples,
where, for illustrative purposes, additional whitespace has been introduced as needed to aid formatting.
Example Fragment – Equivalent Speak
<span tta:speak="normal">
<audio src="http://www.w3.org/ns/ttml/resource/#speech"/>
spoken text
</span>
|
10.3 Styling Value Expressions
Style property values include the use of the following expressions:
10.3.1 <alpha>
An <alpha> expression is used to express an opacity value,
where 0 means fully transparent and 1 means fully opaque.
Syntax Representation – <alpha>|
|
In the above syntax representation, the syntactic element
float must adhere to the lexical
representation defined by [XML Schema Part 2], §3.2.4.1.
If the value represented is less than 0.0,
then it must be interpreted as equal to 0.0; similarly, if the value
represented is greater than 1.0, then it must be interpreted as
1.0. The value NaN must be interpreted as 0.0.
A specified value for <alpha> should not be NaN,
less than 0, or greater than 1.
If a presentation processor does not support a specific,
valid opacity value, then it must interpret it as being equal to the
closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed opacity and the supported opacity is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value most distant from 0, i.e., the greatest opacity, is used.
10.3.2 <annotation-color>
An <annotation-color> expression is used to express the color of text
annotation marks, such as ruby or emphasis marks.
Syntax Representation – <annotation-color>
<annotation-color>
: "current"
| <color>
|
currentEquivalent to the computed value of tts:color of the affected text.
- <color>
The specified color.
If an implementation does not recognize or otherwise distinguish annotation color value, then
it must be interpreted as if a style of current were specified; as such, an implementation that
supports text annotation marks must minimally support the current value.
10.3.3 <annotation-position>
An <annotation-position> expression is used to express the position of text
annotation marks, such as ruby or emphasis marks.
Syntax Representation – <annotation-position>
<annotation-position>
: "before"
| "after"
| "outside"
|
beforeTowards the before edge of the affected glyph areas. If a horizontal writing mode applies, then this is towards the
top of the glyph areas. If a vertical writing mode applies, then this is either towards the right or left of the
glyph areas,
according to whether tts:writingMode resolves to
tbrl or tblr, respectively.
afterTowards the after edge of the affected glyph areas. If a horizontal writing mode applies, then this is towards the
bottom of the glyph areas. If a vertical writing mode applies, then this is either towards the left or right of the
glyph areas, according to whether tts:writingMode resolves to
tbrl or tblr, respectively.
outsideEquivalent to before for (1) the only line area of or (2) the first line area of the last block area generated by
a p element which contains annotated text; otherwise, equivalent to after.
If an implementation does not recognize or otherwise distinguish an annotation position value, then
it must be interpreted as if a position of before were specified; as such, an implementation that
supports text annotation marks must minimally support the before value.
10.3.4 <border>
A <border> expression is used to express one or more border style component expressions.
Syntax Representation – <border>|
|
At least one of the border style components must be present, for example, a <border-style>
component of value none. Note that component order is not significant.
10.3.5 <border-color>
A <border-color> expression is used to express the color of one
or more borders.
Syntax Representation – <border-color>|
|
10.3.6 <border-radii>
A <border-radii> expression is used to express the radii of one
or more borders.
Syntax Representation – <border-radii>|
|
If two <length> expressions are specified, then the first length
corresponds to the quarter ellipse radius for the inline progression dimension (for content) or
horizontal direction (for regions), while the second length, if present, corresponds to the
quarter ellipse radius for the block progression dimension (for content) or vertical direction
(for regions), or, if only one length is present, then it is interpreted as if two lengths were
specified with the same value.
10.3.7 <border-style>
A <border-style> expression is used to express the style of one
or more borders.
Syntax Representation – <border-style>
<border-style>
: "none"
| "dotted"
| "dashed"
| "solid"
| "double"
|
The interpretation of dotted, dashed, and double are considered
to be implementation dependent.
If an implementation does not recognize or otherwise distinguish one of these border style values, then
it must be interpreted as if a style of solid were specified; as such, an implementation that
supports borders must minimally support the solid value.
10.3.8 <border-thickness>
A <border-thickness> expression is used to express the thickness of one
or more borders.
Syntax Representation – <border-thickness>
<border-thickness>
: "thin"
| "medium"
| "thick"
| <length>
|
The interpretation of thin, medium, and thick are considered
to be implementation dependent; however, the resolved lengths must adhere to the following
constraints: thickness(thin) < thickness(medium); thickness(medium) < thickness(thick).
If a border thickness is expressed as a <length>,
then it must not take the form of a percentage value; i.e., it must take the form of a scalar value.
10.3.9 <color>
A <color> expression is used to specify a named color, exact RGB color triple,
or exact RGBA color tuple, where the alpha component, if expressed,
is maximum (255) at 100% opacity
and minimum (0) at 0% opacity, and where the applicable color space is
defined by [SRGB].
Syntax Representation – <color>|
|
When expressing RGB component values, these values are considered
to not be premultiplied by alpha.
For the purpose of performing presentation processing such that
non-opaque or non-transparent alpha or opacity values apply, then the
semantics of compositing functions are defined with respect to the use of
the [SRGB] color space for both inputs and outputs of
the composition function.
Note:
The use of [SRGB] for the stated semantics of
composition is not meant to prevent an actual processor from using some
other color space either for internal or external purposes. For
example, a presentation processor may ultimately convert the SRGB values
used here to the YUV color space for rendition on a television device.
If a presentation processor does not support a specific,
valid color or alpha value, then it must interpret it as being equal
to the closest supported value.
Note:
In this context, the phrase closest supported value means the value for which the Euclidean distance between
the computed color and alpha and the supported color and alpha in the RGB color space is minimized. If there are multiple closest supported values equally distant from
the computed value, then the value least distant from opaque black rgba(0,0,0,255), i.e., the closest to opaque black, is used.
10.3.10 <digit>
A <digit> is used to express integers and other types of numbers or tokens.
Syntax Representation – <digit>
<digit>
: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
|
10.3.11 <emphasis-color>
An <emphasis-color> expression is used to express the color of text
emphasis marks.
Syntax Representation – <emphasis-color>|
|
10.3.12 <emphasis-position>
An <emphasis-position> expression is used to express the position of text
emphasis marks.
Syntax Representation – <emphasis-position>|
|
10.3.13 <emphasis-style>
An <emphasis-style> expression is used to express the style of text
emphasis marks.
Syntax Representation – <emphasis-style>
<emphasis-style>
: "none"
| "auto"
| ( "filled" | "open" ) || ( "circle" | "dot" | "sesame" )
| <quoted-string>
|
The semantics of text emphasis style values are defined as follows:
noneNo text emphasis mark.
autoIf a vertical writing mode applies, then equivalent to filled sesame; otherwise,
equivalent to filled circle.
filledEmphasis mark is filled with emphasis color.
openEmphasis mark is not filled, i.e., its outline is stroked with the emphasis color, but it is not filled.
circleEmphasis mark is a circle. If filled, then equivalent to U+25CF '●'; if open, then equivalent to U+25CB '○'
dotEmphasis mark is a dot. If filled, then equivalent to U+2022 '•'; if open, then equivalent to U+25E6 '◦'
sesameEmphasis mark is a sesame. If filled, then equivalent to U+FE45 '﹅'; if open, then equivalent to U+FE46 '﹆'
- <quoted-string>
Emphasis mark is the first grapheme cluster of string, with remainder of string ignored.
If only filled or open is specified, then it is equivalent to filled circle and open circle, respectively.
If only circle, dot, or sesame is specified, then it is equivalent to filled circle, filled dot, and
filled sesame, respectively.
If an implementation does not recognize or otherwise distinguish an emphasis style value, then
it must be interpreted as if a style of auto were specified; as such, an implementation that
supports text emphasis marks must minimally support the auto value.
10.3.14 <extent>
An <extent> expression specifies the dimensions of a rectangular area.
Syntax Representation – <extent>|
|
10.3.15 <family-name>
A <family-name> expression specifies a font family name.
Syntax Representation – <family-name>
<family-name>
: unquoted-string
| <quoted-string>
unquoted-string
: identifier (<lwsp> identifier)*
identifier
: [-]? identifier-start identifier-following*
identifier-start
: [_a-zA-Z]
| non-ascii-or-c1
| escape
identifier-following
: [_a-zA-Z0-9-]
| non-ascii-or-c1
| escape
non-ascii-or-c1
: [^\0-\237]
escape
: '\\' char
|
In addition to adhering to the syntax rules specified above, the following semantic rules apply:
the semantic value of a <family-name> expression is the semantic value of its unquoted-string or quoted-string
non-terminal, according to whichever applies;
the semantic value of an unquoted-string non-terminal is a pair <quoted, content>,
where quoted is a boolean false, and
where content is the result of appending the value of each identifier
non-terminal, in lexical order, where the value of each identifier is preceded by a single SPACE (U+0020) character if it is not the first
identifier;
the semantic value of a quoted-string non-terminal is a pair <quoted, content>,
where quoted is a boolean true, and
where content is the unquoted content of the quoted string, i.e., the sequence of characters between the delimiting quotes.
the semantic value of an escape non-terminal is the value of the escaped char;
a <family-name> that takes the form of an unquoted-string that contains an identifier that
starts with two - HYPHEN-MINUS (U+002D) characters must be considered to be invalid;
a <family-name> that takes the form of an unquoted-string that contains a single identifier that
matches (by case-sensitive comparison) a <generic-family-name> must be interpreted as that <generic-family-name>;
a <family-name> that takes the form of a quoted-string whose content (unquoted value)
matches (by case-sensitive comparison) a <generic-family-name> must not be interpreted as that <generic-family-name>, but as
the actual name of a non-generic font family.
The syntactic element char is to be interpreted according
to the Char production defined by [XML 1.0], §2.2.
Note:
The {unicode} escape mechanism defined by [CSS2], §4.1.1
is not supported by this syntax; rather, authors are expected to either (1) directly encode the character
using the document encoding or (2) use an XML character reference according to
[XML 1.0], §4.1. When a syntactically significant character needs to be used
without its normal syntactic interpretation, it may be be escaped using the backslash
(reverse solidus) escape non-terminal specified above.
When using the backslash (reverse solidus) escape non-terminal, the above syntax does
not place any restriction on what character may be escaped, e.g., \\[\n\r\f0-9a-f] are
permitted. If one of these latter escapes appears in a <family-name> expression, then it will
need to be converted to a {unicode} escape if it is to be used with a standard XSL-FO
or CSS parser. In particular, a backslash followed by a newline is ignored by CSS, while it is not
ignored by the above syntax. Such an unignored escaped newline would need to be represented using
an equivalent {unicode} escape, such as \a, to order to express in CSS.
10.3.16 <font-families>
A <font-families> expression specifies a non-empty list of font families.
Syntax Representation – <font-families>|
|
10.3.17 <font-size>
A <font-size> expression specifies a font size in terms of one or two <length> expressions.
Syntax Representation – <font-size>|
|
10.3.18 <font-variant>
A <font-variant> expression specifies one or more keywords that influence the character
to glyph mapping process, and, specifically, whether and which type of variant glyph is to be selected
(if available in the applicable font) when peforming presentation processing.
Syntax Representation – <font-variant>
<font-variant>
: "normal"
| ("super" | "sub") || ("full" | "half") || "ruby"
|
If the value normal applies, then, unless a higher level protocol applies,
none of subscript, superscript, full, half, or ruby
glyph variations are selected.
If the keyword super applies, then superscript glyph variants are selected (if available).
For example, when rendering with an OpenType font, the OpenType sups feature is enabled. If the keyword sub applies,
then subscript glyph variants are selected (if available).
For example, when rendering with an OpenType font, the OpenType subs feature is enabled.
If the keyword full applies, then full width glyph variants are selected (if available).
For example, when rendering with an OpenType font, the OpenType fwid feature is enabled. If the keyword half applies,
then half width glyph variants are selected (if available).
For example, when rendering with an OpenType font, the OpenType hwid feature is enabled.
If the keyword ruby applies, then ruby glyph variants are selected (if available).
For example, when rendering with an OpenType font, the OpenType ruby feature is enabled.
Note:
For the definition of an OpenType font, see [OFF].
If multiple variations apply, then glyphs that satisfy the maximum number of applicable variations are selected. For example,
if both super and half variations are specified, then glyphs that are simultaneously designated as both superscript and
half width variations are selected (if available). If only subsets of the requested variations can be satisfied, and there is more than
one possible subset that would result in a difference in the selected variation glyphs, then which subset applies is considered implementation
dependent, i.e., determined by the document processing context.
10.3.19 <generic-family-name>
A <generic-family-name> expression specifies a font family using a general
token that indicates a class of font families.
The resolution of a generic family name to a concrete font instance is considered to
be implementation dependent, both in the case of content authoring and content interpretation.
Syntax Representation – <generic-family-name>
<generic-family-name>
: "default"
| "monospace"
| "sansSerif"
| "serif"
| "monospaceSansSerif"
| "monospaceSerif"
| "proportionalSansSerif"
| "proportionalSerif"
|
The mapping between a generic (font) family name and an actual font is not
determined by this specification; however, the
distinction of monospace versus proportional and serif versus sans-serif
should be maintained if possible when performing presentation.
If a generic (font) family name of monospace is specified,
then it may be interpreted as equivalent to either monospaceSansSerif
or monospaceSerif. The generic family names sansSerif
and serif are to be interpreted as equivalent to proportionalSansSerif
and proportionalSerif, respectively.
If the generic family name default is specified (or implied by
an initial value), then its typographic characteristics are considered to be implementation
dependent; however, it is recommended that this default font family be mapped to
a monospaced, sans-serif font.
10.3.20 <hex-digit>
A <hex-digit> is used to express integers and other types of numbers or tokens
that employ base 16 arithmetic.
For the purpose of parsing, a distinction must not be made between lower and upper case.
Syntax Representation – <hex-digit>
<hex-digit>
: <digit>
| "a" | "b" | "c" | "d" | "e" | "f"
| "A" | "B" | "C" | "D" | "E" | "F"
|
10.3.21 <integer>
An <integer> expression is used to express an arbitrary, signed integer value.
Syntax Representation – <integer>|
|
Note:
The values of the lexical representations "-0", "0", and "+0",
regardless of the presence of additional leading or trailing "0" digits, are considered to be equal to the integer value zero (0).
10.3.22 <length>
A <length> expression is used to express either a coordinate component of point
in a cartesian space or a distance between two points in a cartesian space.
Syntax Representation – <length>|
|
It is an error to omit the units component of a scalar length value.
The unit px (pixel) corresponds to a logical pixel of
the document coordinate space,
as defined by H.3 Coordinate Space; however,
the px (pixel) unit should not be used in a <length> expression
unless a tts:extent attribute consisting
of two <length> specifications using px (pixel) units is
specified on the tt element,
without which the use of the px (pixel) unit is deprecated
When specified relative to a font whose size is expressed as a single length
or as two lengths of equal length, the unit em is considered to be
identical to that defined by [XSL-FO 1.1], §5.9.13;
however, when specified relative to a font whose size is expressed as
two lengths of non-equal lengths, then one em is
equal to the inline progression dimension of the anamorphically
scaled font when used to specify lengths in the inline progression
direction and equal to the block progression dimension of the scaled
font when used to specify lengths in the block progression direction.
Unless specified otherwise, the em unit is resolved in relation to the
computed value of the property associated with the tts:fontSize attribute that
applies to the element in which context the em unit is resolved.
The semantics of the unit c (cell) are
defined by the parameter 7.2.1 ttp:cellResolution.
The root container relative
units rw and rh are defined as
one percent (1%) of the width and height of the root container region, respectively.
For example, the length 25rw is interpreted as 25% of the width of
the root container region.
10.3.23 <lwsp>
A <lwsp> is used to express the common linear whitespace (LWSP) syntactic construct.
Syntax Representation – <lwsp>|
|
10.3.24 <measure>
A <measure> value expresses a distance as an
absolute dimension or a
relative dimension, where the context of use determines which dimension applies.
If one of the two absolute dimensions, height or width, applies,
then the associated relative dimension, bpd or
ipd, is determined in accordance with the applicable
writing mode and text orientation, such that
the associated relative dimension governs the interpretation of the specified value as described below.
Otherwise, one of the two relative dimensions, bpd or
ipd, applies, in which case that relative dimension governs the
interpretation of the speccified value as defined below.
Syntax Representation – <measure>
<measure>
: "auto"
| "fitContent"
| "maxContent"
| "minContent"
| <length>
|
The semantics of these values are defined as follows:
autoFor ipd,
when applied to an image, the intrinsic size in the inline progression direction; otherwise,
the numeric value that would be obtained if a value of 100% were specified.
For bpd,
when applied to an image, the intrinsic size in the block progression direction; otherwise,
the numeric value that would be obtained if a value of 100% were specified.
fitContentA numeric value equal to the maximum of the values of (1) minContent and (2) the minimum of values of maxContent
and auto.
maxContentFor ipd, the maximum numeric value that encloses all of the element's content such that lines are broken only at
hard, i.e., mandatory, break points, even if that means overflowing the parent's ipd.
For bpd, the maximum numeric value that encloses all of the element's content such that lines are broken at
all possible line break positions, i.e., both hard (mandatory) and soft (optional) break points.
minContentFor ipd, the minimum numeric value that encloses all of the element's content such that lines are broken at
all possible line break positions, i.e., both hard (mandatory) and soft (optional) break points.
For bpd, the minimum numeric value that encloses all of the element's content such that lines are broken only at
hard, i.e., mandatory, break points, even if that means overflowing the parent's ipd.
<length>A non-negative numeric value expressed as a scalar or percentage.
10.3.25 <named-color>
A <named-color> is used to express an RGBA color with a convenient name, and where the applicable color space is
defined by [SRGB].
For the purpose of parsing, a distinction must not be made between lower and upper case.
Syntax Representation – <named-color>
<named-color>
: "transparent" // #00000000
| "black" // #000000ff
| "silver" // #c0c0c0ff
| "gray" // #808080ff
| "white" // #ffffffff
| "maroon" // #800000ff
| "red" // #ff0000ff
| "purple" // #800080ff
| "fuchsia" // #ff00ffff
| "magenta" // #ff00ffff (= fuchsia)
| "green" // #008000ff
| "lime" // #00ff00ff
| "olive" // #808000ff
| "yellow" // #ffff00ff
| "navy" // #000080ff
| "blue" // #0000ffff
| "teal" // #008080ff
| "aqua" // #00ffffff
| "cyan" // #00ffffff (= aqua)
|
Note:
Except for transparent, the set of named colors specified above constitutes a proper
subset of the set of named colors specified by [SVG 1.1], §4.2.
10.3.26 <non-negative-integer>
A <non-negative-integer> expression is used to express an arbitrary, non-negative integral value.
Syntax Representation – <non-negative-integer>|
|
10.3.27 <non-negative-number>
A <non-negative-number> expression is used to express an arbitrary, non-negative integer or real valued number.
Syntax Representation – <non-negative-number>|
|
10.3.28 <number>
A <number> expression is used to express an arbitrary, optionally signed integer or real valued number.
Syntax Representation – <number>|
|
Note:
The values of the lexical representations
"-0", "-0.", "-.0", "-0.0",
"0", "0.", ".0", "0.0",
"+0", "+0.", "+.0", and "+0.0",
regardless of the presence of additional leading or trailing "0" digits,
are considered to be equal to the numeric value zero (0).
10.3.29 <origin>
An <origin> expression specifies the dimensions of a rectangular area.
Syntax Representation – <origin>|
|
10.3.30 <padding>
A <padding> expression specifies the insets that apply to an area's padding rectangle.
Syntax Representation – <padding>|
|
10.3.31 <percentage>
A <percentage> expression is used to express an arbitrary, signed integer or real valued percentage.
Syntax Representation – <percentage>|
|
10.3.32 <pitch>
A <pitch> value expresses an absolute or relative pitch frequency adjustment to be applied to synthesized speech.
Syntax Representation – <pitch>|
|
If specified as a <percentage>, then the output pitch (frequency) is
input pitch (frequency) * (1.0 + (percentage/100)).
If specified as a <number> and
if a sign is specified, then the output pitch is the input pitch adjusted positively (negatively) in accordance with
whether the sign is positive (negative); however, if no sign is specified, then the input pitch is set to the specified value, i.e.,
is not relative to the input pitch. If a units component is present, then it specifies either Hertz (hz)
or semi-tones (st), i.e., half steps on the standard diatonic scale.
If no units component is specified, then Hertz is implied.
10.3.33 <position>
A <position> expression is used to indirectly determine the origin of an area or an image with respect to a reference area.
Syntax Representation – <position>
<position>
: offset-position-h // single component value
| edge-keyword-v // single component value
| offset-position-h <lwsp> offset-position-v // two component value
| position-keyword-v <lwsp> position-keyword-h // two component value
| position-keyword-h <lwsp> edge-offset-v // three component value
| position-keyword-v <lwsp> edge-offset-h // three component value
| edge-offset-h <lwsp> position-keyword-v // three component value
| edge-offset-v <lwsp> position-keyword-h // three component value
| edge-offset-h <lwsp> edge-offset-v // four component value
| edge-offset-v <lwsp> edge-offset-h // four component value
offset-position-h
: position-keyword-h
| <length>
offset-position-v
: position-keyword-v
| <length>
edge-offset-h
: edge-keyword-h <lwsp> <length>
edge-offset-v
: edge-keyword-v <lwsp> <length>
position-keyword-h
: "center"
| edge-keyword-h
position-keyword-v
: "center"
| edge-keyword-v
edge-keyword-h
: "left"
| "right"
edge-keyword-v
: "top"
| "bottom"
|
A <position> expression may consist of one to four component values as follows, formally defined by the above syntax:
- one component
either a horizontal offset position or a vertical edge keyword
- two components
a horizontal position offset followed by a vertical position offset or
a vertical position keyword followed by a horizontal position keyword
- three components
a horizontal edge offset and a vertical position keyword or a horizontal position keyword and a vertical edge offset, in any order
- four components
a horizontal edge offset and a vertical edge offset, in any order
Every <position> expression can be translated to a four component equivalent of the form
left <length> top <length> by means of the following
equivalence tables:
One Component Equivalents| Value | Equivalent |
|---|
center | center center |
left | left center |
right | right center |
top | center top |
bottom | center bottom |
<length> | <length> center |
Two Component Equivalents| Value | Equivalent |
|---|
bottom center | left 50% top 100% |
bottom left | left 0% top 100% |
bottom right | left 100% top 100% |
center center | left 50% top 50% |
center top | left 50% top 0% |
center bottom | left 50% top 100% |
center left | left 0% top 50% |
center right | left 100% top 50% |
center <length> | left 50% top <length> |
left center | left 0% top 50% |
left top | left 0% top 0% |
left bottom | left 0% top 100% |
left <length> | left 0% top <length> |
right center | left 100% top 50% |
right top | left 100% top 0% |
right bottom | left 100% top 100% |
right <length> | left 100% top <length> |
top center | left 50% top 0% |
top left | left 0% top 0% |
top right | left 100% top 0% |
<length> center | left <length> top 50% |
<length> top | left <length> top 0% |
<length> bottom | left <length> top 100% |
<length-1> <length-2> | left <length-1> top <length-2> |
Note:
When a two component expression consists of two <length> values, then,
to avoid a possibly ambiguous interpretation, the first is interpreted as a horizontal length and the second
as a vertical length as indicated in the last row of the above table.
If a <length> component is expressed as a percentage, then that percentage is interpreted in relation to
some reference dimension, where the reference dimension is defined by the context of use.
A <length> component of a <position> expression may be positive or negative. Positive lengths are interpreted as
insets from the referenced edge, while negative lengths are interpreted as outsets from the referenced edge. For example, an inset from the left
edge is located to the right of that edge (if non-zero), while an outset from the left edge is located to the left of that edge (if non-zero). In
contrast, an inset from the right edge is located to the left of that edge (if non-zero), while an outset from the right edge
is located to the right of that edge (if non-zero). A similar arrangement holds for top and bottom edges.
When performing four component equivalent conversion, the expression (100% - <length-h>)
is to be interpreted as the difference between 100% and the percentage equivalent of the <length-h>
expression. Similarly, the expression (100% - <length-v>)
is to be interpreted as the difference between 100% and the percentage equivalent of the <length-v> expression.
In both cases, the resulting difference may be a negative percentage.
10.3.34 <ruby-reserve>
A <ruby-reserve> expression is used to reserve space for the placement of ruby text content.
Syntax Representation – <ruby-reserve>|
|
10.3.35 <shadow>
A <shadow> value expresses a shadow decoration to be applied to a generated area. If
the generated area is a glyph area, then it applies to the outline of the glyph
(not the glyph area bounding box). If the generated area is not a glyph area,
then it applies to the border rectangle of the area.
Syntax Representation – <shadow>|
|
A shadow value expression consists of
two to three <length> terms and
an optional <color> term,
where terms are separated from one another by linear white space (LWSP).
The first <length> term denotes the offset
along the horizontal axis dimension of the associated area,
where positive denotes towards the right edge and negative towards the left edge,
the second <length> term denotes the offset
along the vertical axis dimension of the associated area,
where positive denotes towards the bottom edge and negative towards the top edge.
The third <length> term, if present, denotes the blur radius, and must be non-negative.
If no blur radius is specified, i.e., only two <length> terms are present,
then the computed value of 0px applies.
If no <color> term is
present, then the computed value of the tts:color property applies.
Note:
When a <length> expressed in
cells is used in a tts:textShadow value,
the cell's dimension in the block progression dimension applies.
For example, if text shadow thickness is specified as 0.1c, the cell resolution
is 20 by 10, and the extent of the root container region is 640 by 480, then the
shadow thickness will be a nominal 480 / 10 * 0.1 pixels, i.e., 4.8px,
without taking into account rasterization effects.
10.3.36 <text-combine>
A <text-combine> expression is used to determine the behavior of text combination effects in vertical text.
Syntax Representation – <text-combine>
<text-combine>
: "none"
| "all"
|
10.3.37 <text-decoration>
A <text-decoration> expression is used to determine the behavior of text decoration effects.
Syntax Representation – <text-decoration>
<text-decoration>
: "none"
| (("underline" | "noUnderline") || ("lineThrough" | "noLineThrough") || ("overline" | "noOverline"))
|
10.3.38 <text-emphasis>
A <text-emphasis> expression is used to determine the behavior of text emphasis effects.
Syntax Representation – <text-emphasis>|
|
10.3.39 <text-outline>
A <text-outline> expression is used to determine the behavior of text outline effects.
Syntax Representation – <text-outline>|
|
10.3.40 <text-shadow>
A <text-shadow> expression is used to determine the behavior of text shadow effects.
Syntax Representation – <text-shadow>|
|
10.3.41 <whitespace>
A <whitespace> value is used to express a common whitespace characters.
Syntax Representation – <whitespace>
<whitespace>
: ( " " | "\t" | "\n" | "\r" )
|
