This is a W3C Working Draft for review by W3C members and other interested
parties. It is a draft document and may be updated, replaced, or obsoleted
by other documents at any time. The
Internationalization Working
Group (members only) will
not allow early implementation to constrain its ability to make changes to
this specification prior to final release. It is inappropriate to use W3C
Working Drafts as reference material or to cite them as other than "work
in progress". A list of current W3C working drafts can be found at
http://www.w3.org/TR.
This document has been produced as part of the
W3C Internationalization
Activity and is related to the
Style Activity. Since this
proposal predates the efforts on the part of the
XSL and
CSS&FP groups
(members only) to create a
common formatting model, it focuses on CSS [CSS2] only.
It is however the intention of all the groups involved for the model presented
in this document and the model being developed by the
XSL Working Group (members only) to converge. The
end result of this convergence is expected to form part of the common formatting
model which will be expressed in both the CSS [CSS2] and
XSL [XSL] syntaxes. Please send comments and questions
regarding this document to
i18n-editor@w3.org (archived for
W3C members). Comments in languages other than English, in particular Japanese,
are also welcome.
Note that Appendix A is currently under discussion among
the XSL, CSS&FP and I18N Working Groups.
The HyperText Markup Language (HTML) is a simple markup language used to
create hypertext documents that are portable from one platform to another.
HTML documents are SGML documents with generic semantics that are appropriate
for representing information from a wide range of applications. CSS is a
style sheets language that can be applied to HTML to control the style of
a document: which fonts and colors to use, how much white space to insert,
etc. The following specification extends CSS to support East Asian and
Bi-directional text formatting. Familiarity with both CSS 2
[CSS2] and HTML 4.0 [HTML4] is assumed.
International typography contains types of formatting that are not yet exposed
in the existing web standards and thus impossible to achieve on the web without
using special workarounds or graphics.
This document introduces a number of new CSS properties to represent such
formatting. For example, the features this proposal covers include two of
the most important features for East Asian typography: vertical layout flow
and layout grid.
There is a number of illustrations in this document for which the following
legend is used:
- wide-cell glyph (e.g. Han) which is the
n-th character in the text run
- narrow-cell glyph (e.g. Roman) which is
the n-th glyph in the text run
- connected glyph (e.g. Arabic) which is the
n-th glyph in the text run
The orientation which the above symbols assume in the diagrams corresponds
to the orientation that the glyphs they represent are intended to assume
when rendered in the UA. Spacing between these characters in the diagrams
is usually symbolic, unless intentionally changed to make a point.
Most Latin based documents use a simple horizontal left-to-right text layout
flow in which the next line always appears below the previous one. The example
below shows three lines of mixed text in regular horizontal layout flow mode
available to web authors today:
Figure 2.1.1: Mixed text in horizontal layout
Unfortunately HTML and CSS today provide support only for the above layout
scenario. There are several others, however, which are especially important
in East Asian documents. They are discussed in the following sections.
Value: horizontal | vertical | vertical-ideographic
Initial: horizontal
Applies to: all elements
Inherited: yes
Percentage values: N/A
This property sets the layout flow for the element. It is valid on all elements.
Possible values:
-
horizontal - sets the layout flow mode to horizontal, used in
most Roman-based documents. All lines of text in the element in this mode
are horizontal. Character flow is determined by the Unicode bi-directional
algorithm unless overridden with appropriate BDO tags or
DIR attributes. All glyphs appear in their upright position.
The next line of text appears under the previous line. This is the initial
value.
The diagrams below illustrate character flow in this mode. They assume that
the narrow-cell glyphs' directionality is LTR. The second diagram is a real
world example of this layout:
Figure 2.2.1: Mixed glyphs in horizontal layout
-
vertical-ideographic - sets the layout flow mode to vertical
ideographic, which represents the natural orientation for ideographic text.used
in East Asian typography. All lines of text in the element are vertical.
Wide-cell glyphs appear in their regular upright position. Their vertical
baselines running through the middle of each character are aligned. Non-wide-cell
glyphs ('narrow' Latin or narrow Kana glyphs) appear
rotated by 90 degrees clockwise. The next line of text appears on the left
side of the previous one.
The diagrams below illustrate character flow in this mode. They assume that
the narrow-cell glyphs' directionality is LTR. The second diagram is a real
world example of this layout:
Figure 2.2.2: Mixed text in vertical-ideographic layout
-
vertical - sets the layout flow mode to vertical. Though hardly
as frequent as horizontal, this type of vertical layout occurs in Latin based
documents, particularly in table column or row labels. All glyphs appear
in their upright position and the line flow is Latin-like, i.e. the next
line appears on the right side of the previous one. Their vertical baselines
running through the middle of each glyph are aligned.
The diagrams below illustrate character flow in this mode. They assume that
the narrow-cell glyphs' directionality is LTR. The second diagram is a real
world example of this layout:
Figure 2.2.3: Mixed glyphs in vertical layout (Note that this type
of line flow is not correct for Japanese text)
In East Asian documents, it is often preferred to display certain Latin-based
strings, such as numerals in a year, always in a horizontal layout flow
regardless of the flow mode of the line of text these strings appear in,
as in:
Figure 2.3.1: Horizontal in vertical (a.k.a
"Tate-chu-yoko")
This effect is known as "Tate chu
yoko". In order to achieve it, the Latin string should be enclosed
within a SPAN element with a 'layout-flow: horizontal' setting
in CSS, as in:
<span STYLE="layout-flow: horizontal">1996</span>
Also, line breaking is normally disabled for such runs of text. This can
be accomplished using the CSS
"white-space:
nowrap" setting [CSS2].
The different layout flows discussed in the preceding sections determine
the text flow independently of the inherent directionality of the content
characters. This means that, unless special formatting is applied to them,
Hebrew and Arabic characters will be read from right to left in a horizontal
layout flow and bottom to top in the 'vertical-ideographic' layout flow.
The
direction
and
unicode-bidi
properties in [CSS2] will affect the base direction of
the element that it is applied to, but will not affect the line to line flow.
For example, an element with a 'vertical' (not 'vertical-ideographic') layout
flow and an RTL direction will flow top to bottom and left to right. Worth
mentioning is the case of Mongolian, related to Right to Left writing systems,
that would use the vertical layout flow mode as its normal rendering mode.
Blocks of Latin text in Mongolian context would have 'vertical-ideographic'
applied to them directly.
Insofar, it has been assumed that ideographs have an inherent LTR directionality,
and they are treated as such by the Unicode bi-directional algorithm. However
it may be desirable to show ideographs flowing in arbitrary direction as
this is found frequently in Asian writing systems. This may be achieved by
mixing the layout flow modes, the
unicode-bidi
and
direction
properties. For example, encapsulating ideographs with a <SPAN
STYLE="unicode-bidi: override; direction: rtl"> in a horizontal
flow will make them flow right to left and top to bottom. A case could also
be made of creating other layout flow modes to capture additional writing
systems usage.
Since CSS was originally designed with only horizontal layout in mind, special
care needs to be taken in determining the proper interaction between the
proposed vertical text model and both the existing CSS as well as the CSS
addressed in this specification, when addressing layout flows other than
horizontal. The behavior of several CSS properties needs to be revisited
in the vertical layout context. For a complete list of properties affected,
see Appendix A.
The position of the underline, overline, ruby text and emphasis in vertical
layout is easily predictable. Anything that appears below a line of text
in horizontal layout should appear on the left side of the vertical column
in vertical ideographic layout. Similarly anything that appears above a
horizontal line of text should appear on the right side of that line in vertical
ideographic.
Note that the different CJK typographies may have their own preferred position
for underline in horizontal layout. Their preferences for vertical layout
however follow the rule described above, i.e. "below" always becomes "left"
and "above" becomes "right". The table below summarizes the preferences for
emphasis and ruby text positioning in vertical layout.
| Language |
Horizontal |
Vertical |
| Emphasis |
Ruby |
Emphasis |
Ruby |
| Japanese |
top |
top |
right |
right |
| Chinese (Traditional) |
above |
above |
right |
right |
| Chinese (Simplified) |
below |
above |
left |
right |
Figure 2.5.1: Language driven preferneces for emphasis and ruby position
in horizontal and vertical layout
It is very common for the glyphs in documents written in East Asian languages,
such as Chinese or Japanese, to be laid out on the page according to a specified
one- or two-dimensional grid. The concept of grid can also be used in other,
non-ideographic contexts such as Braille or monospaced layout.
The diagram below represents a fragment of horizontal text on a page with
mixed wide-cell and narrow-cell glyphs that a Japanese user intended to be
laid out on a grid which resulted in 9 glyphs per line (gray grid lines shown
for clarity):
Figure 3.1.1: 'Genko' grid applied to mixed
text
The grid affects not only the placement of the glyphs, but it can also modify
the behavior of several other layout-related behaviors, such as indent size,
margins or paragraph alignment.
One can distinguish between three types of grid: a strict one, used
mostly in Chinese, but also occasionally in Japanese (a.k.a.
"genko"), a loose one, frequently used in
Japanese and sometimes in Korean, as well as a fixed one, potentially
useful for non-ideographic text, such as Braille or mono-spaced layout in
general.
The grid type entails a set of layout rules that determine how much flexibility
the UA is allowed to have when laying out a line of text.
Different grids can be defined for different parts of the document.
The grid can be selectively disabled in either dimension on fragments of
text.
Line grid can be disabled for individual paragraphs. If line grid is disabled
for a paragraph, the lines of the paragraph are laid out just as if no line
grid were specified. The glyphs in a paragraph with line grid disabled still
follow the character grid, if one is specified.
The CSS model described in this section exposes the necessary grid parameters
the author needs to control.
Value: loose | strict | fixed
Initial: loose
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
Specifies the type of grid to use. Each grid type entails a different set
of rules for rendering contents when a grid is enabled and specified. Possible
values:
-
loose - grid type used in Japanese and sometimes Korean, where
a constant width increment is applied to all glyphs as follows:
-
wide-cell (as well as narrow-cell Kana) glyphs get
a spacing increment equal to the amount specified by
'layout-grid-char'.
-
the other narrow-cell glyphs (except for connected glyphs and glyphs formatted
with a cursive font) get half the increment applied to wide-cell glyphs (though
the UA is free to select a different amount).
-
all other glyphs (i.e. connected), do not get any spacing increments at all,
i.e. they behave as if there were no character grid set.
The diagram below illustrates this type of grid:
Figure 3.2.1: Spacing increment distribution in loose grid.
dF represents the amount of spacing
applied between wide-cell glyphs. In the loose grid context, that amount
is set by 'layout-grid-char'.
Figure 3.2.2: Loose grid applied to mixed text
In this mode, if only wide-cell glyphs or exact narrow-cell glyphs (like
some katakana glyphs) are
used, the result may effectively look like a strict grid. However,
since all other width adjustments are active (text justification, character
width adjustment, text autospace, etc), the end result is typically a loosely
aligned grid layout.
-
strict - grid type traditionally used in Chinese, as well as
occasionally in Japanese (a.k.a. "Genko") and Korean.
This mode applies in the following ways to the various character sets:
-
each wide-cell glyph (as well as narrow-cell
kana) that can fit within a
single grid space is rendered in the horizontal center of the grid space.
The width of the grid space is determined by the
'layout-grid-char' setting.
-
consecutive narrow-cell and connected glyphs are treated as a single strip,
which is then placed in the center of the smallest number of grid spaces
necessary for it to fit in. They behave as if the
'layout-grid-mode' property were set to 'none'
or 'line' around them. If a line break occurs within such a strip, the strip
is treated as two separate strips whose individual placement follows the
same rules as those for a single strip.
-
non-breakable objects (e.g. images) and wide-cell glyphs that for some reason
are wider than a single grid space, are each centered within the smallest
number of grid cells necessary for it to fit in.
Figure 3.2.3: Mixed glyph layout in strict grid
Figure 3.2.4: Object layout in strict grid
The strict mode disables all special text justification and glyph width
adjustment normally applied to the contents of the element.
If a line break opportunity cannot be found in a text run going over the
line boundary, then that text run will be pushed down to the next line and
the last part of the previous line will be left blank.
Here is an example of mixed text in strict grid:
Figure 3.2.5: Strict grid applied to mixed text
-
fixed - This type of grid can be used to achieve mono-spaced
layout. The layout rules are simple: all non-connected glyphs are treated
as equal, that is every glyph is centered within a single grid space by default.
Runs of connected glyphs are treated as strips the same way as in 'strict'
grid. Justification or any other character-width changing behaviors are disabled.
Figure 3.2.6: Mixed glyph layout in fixed grid
For example:
Figure 3.2.7: Fixed grid applied to mixed text
Value: none | auto | <length> | <percentage>
Initial: none
Applies to: block-level elements
Inherited: yes
Percentage values: relative to element height
This property sets the line grid value for an element. If the text layout
flow of the element is horizontal, this property can be thought of as the
"vertical" grid size or grid height. In other words, it always determines
the line spacing increment, regardless of the layout flow mode. Its effect
is visually somewhat similar to the effect of applying a
'line-height'
value to an element. The following table shows the mapping between each of
the 'layout-flow' values and the meaning of the
'layout-grid-line' property:
| 'layout-flow' |
Meaning
of 'layout-grid-line' |
| horizontal |
vertical height of grid space |
| vertical |
horizontal width of grid space |
| vertical-ideographic |
horizontal width of grid space |
Figure 3.3.1: Mapping between 'layout-flow' and the interpretations
of 'layout-grid-line'
Note that in order for this property to have an effect,
'layout-grid-mode' must be set to 'line' or
'both'.
When this property is set to anything other than 'none', a line of text is
vertically centered within the grid row and baseline-aligned by default.
If the line contains a glyph or an object that is taller than the grid space,
then the whole line is centered within the smallest number of grid rows necessary
for its tallest object to fit in. This is illustrated below, where
a represents the numerical
'layout-grid-line' value:
Figure 3.3.2: Layout of contents within line grid, where
a represents the layout-grid-line value
Possible values:
-
none - no line grid is specified.
-
auto - the grid line size is determined by the largest character
in the element's font.
-
<length> - size of the line grid's unit space (a.k.a.
"line pitch").
-
<percentage> - size of the line grid's unit space relative
to the logical height of the parent element.
The following markup:
DIV.section1 { layout-grid-line: .5in }
would make each line of text in a horizontally (including
'-ideographic') laid out section of a document to be rendered within 0.5
inch of vertical space. It is also equivalent to having a line-height of
0.5 in, as shown below:
Figure 3.3.3: Enlarged line grid applied to mixed text in horizontal
layout
If the section's layout flow is vertical (including
'-ideographic'), then 0.5in is the width of each column of vertical text.
This time, the 0.5in value applies to the 'width' of each cell:
Figure 3.3.4: Enlarged line grid applied to mixed text in
vertical-ideographic layout
If the author preferred a specific number of lines (20 for example) to appear
in an element, he would use a percentage value:
DIV.section1 { layout-grid-line: 5% }
Value: none | auto | <length> | <percentage>
Initial: none
Applies to: block-level elements
Inherited: yes
Percentage values: relative to element width
This property affects the dimension perpendicular to that controlled by
'layout-grid-line'. It controls the character
(or "horizontal", if in horizontal layout) grid size for an element if the
'layout-grid-type' property is set to 'strict'
or 'fixed'. However, if 'layout-grid-type is
'loose', then this property sets the size of the increment added to each
wide-cell glyph, and, indirectly, of that added to each narrow-cell glyph,
as per the description in the specification of
'layout-grid-type'. Its effect in 'loose' grid
is somewhat similar to the effect of the
'letter-spacing'
property.
Note that in order for this property to have an effect,
'layout-grid-mode' must be set to 'char' or
'both'.
Possible values:
-
none - no character grid.
-
auto - the width of the widest glyph in the element's font is
used as the character grid.
-
<length> - width of the grid's unit space.
-
<percentage> - width of the grid's unit space relative
to the logical width of the parent element.
DIV.section1 { layout-grid-char: .5in }
would make each glyph in a horizontally laid out part of a document rendered
within 0.5 inch of horizontal space:
Figure 3.4.1: Enlarged character grid applied to mixed text in horizontal
layout
If the section's layout flow is vertical, then 0.5in becomes the vertical
distance between consecutive characters in a column:
Figure 3.4.2: Enlarged character grid applied to mixed text in
vertical-ideographic layout
If the author preferred a specific number of glyphs (5 for example) to appear
in a line, he would set the character grid to a percentage value:
DIV.section1 { layout-grid-char: 20% }
Value: none | line | char | both
Initial: both
Applies to: all elements
Inherited: yes
Percentage values: N/A
This property selectively enables or disables the two dimensions of the grid.
Possible values:
-
none - no grid is active in either dimension.
-
line - only line grid is used. Character grid is disabled. This
is the value recommended for use inline to disable horizontal grid on runs
of text and turn them into "strips" that are laid out within the grid as
a single unit, regardless of the nature of the glyphs contained within it.
-
char - only character grid is used. Line grid is disabled. This
is the value recommended for use on block-level elements, such as paragraphs,
for which the line grid is intended to be disabled.
-
both - enables the grid in both dimensions (if both are specified).
This setting is necessary to fully enable layout grid on an element. This
is the initial value.
Value: none | [<mode> || <type> || [<line>
[<char>]? ] ]
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: yes
Percentage values: allowed on
<char> and
<line>
The 'layout-grid' property is a shorthand property for setting
'layout-grid-mode',
'layout-grid-type',
'layout-grid-line' and
'layout-grid-char' at the same time in the
style sheet. Using the value 'none' on the shorthand property sets the
'layout-grid-mode' to 'none'. Using the value
"none none" sets both the 'layout-grid-mode'
and 'layout-grid-line' to 'none', and using
the value "none none none" sets the previous properties as well as
'layout-grid-char' to 'none'.
The first numerical, percentage or 'auto' value specified sets
'layout-grid-line'. If a second numerical,
percentage or 'auto' value is present, it sets
'layout-grid-char'. For example:
DIV.section1 { layout-grid: both strict .5in 20% }
The 'layout-grid' property above is set to have the
'layout-grid-type' set to 'strict',
'layout-grid-mode' to 'both',
'layout-grid-line' to 0.5in and the
'layout-grid-char' to 20% of the parent width.
Notes:
-
The reason why <line> precedes the optional <char> is that in
Japanese, character grid, though possible, is not required. In horizontal
Japanese text, line grid is often used without character grid.
-
The initial value of the shorthand property, although not defined, can be
assumed as the following:
{ layout-grid: both loose none none }
as derived from the initial values of the contained properties. The 'none'
values make the grid inactive. Setting any other values on the
'layout-grid-line' or
'layout-grid-char' will make the grid active
in either or both of these modes.
-
Since the effects of 'layout-grid-line' and
'layout-grid-char' are dependent on the value
of 'layout-grid-mode' , it is possible to create
a situation where providing a value for those 2 settings will not have any
effect. For example in the following setting:
DIV.section1 { layout-grid: strict line .5in 20% }
the 20% 'layout-grid-char' setting will not be active. However changing
'layout-grid-mode' later to either 'both' or 'char' would make it active.
This amount of control is very useful for scenarios in which the same grid
dimensions are used across the entire document, but the various dimensions
are occasionally selectively disabled or enabled for fragments of text.
The existence of a grid in an element makes it possible and very useful to
express various measurements in that element in terms of grid units. Grid
units are used very frequently in East Asian typography, especially for the
left, right, top and bottom element margins.
Therefore a new length unit is necessary: gd to enable the author
to specify the various measurements in terms of the grid.
For example, consider the following style:
P { layout-grid: strict both 20pt 15pt; margin: 1gd 3gd 1gd 2gd }
This way, all P elements would effectively acquire a 15pt top
margin, a 60pt right margin, a 15pt bottom margin and a 40pt left margin.
If no grid is specified, the gd unit should be treated the same
as the em unit.
In documents written in Latin-based languages, where runs of characters make
up words and words are separated by spaces or hyphens, line breaking is
relatively simple. In the most general case, (assuming no hyphenation dictionary
is available to the UA), a line break can occur only at whitespace characters
or hyphens.
In ideographic typography, however, where what appears as a single glyph
can represent an entire word and no spaces nor any other word separating
characters are needed, a line breaking opportunity is not as obvious as a
space. It can occur after or before many other characters. Certain line breaking
restrictions still apply, but they are not as strict as they are in Latin
typography.
(As a side note, Thai is another interesting example with its own special
line breaking rules. Since Thai words are made up of runs of characters,
it resembles Latin in that respect. But the lack of spaces as word delimiters,
or in fact any consistent word delimiters, makes it similar to CJK. Thai,
like Latin in the absence of a hyphenating dictionary, never breaks inside
of words. In fact, a knowledge of the vocabulary is necessary to be able
to correctly break a line of Thai text.)
A number of levels of line-breaking "strictness" can be used in Japanese
typography. These levels add or remove line breaking restrictions. The model
presented in this specification distinguishes between two most commonly used
line breaking levels for Japanese text, using the
'line-break' property.
In ideographic typography, it is also possible, though not always preferred,
to allow line breaks to occur inside of quoted Latin and
Hangul (Korean) words without following the line breaking
rules of those particular scripts. The model proposed in this document gives
the author control over that behavior through the
'word-break' property.
Value: normal | strict
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
This property selects the set of line breaking rules to be used for text.
The values described below are especially useful to CJK authors, but the
property itself is open to other, not yet specified settings for non-CJK
authors as well. (This is an area for future expansion.)
-
normal - selects the normal line breaking mode for CJK. While
the UA is free to define its own line breaking restrictions for the 'normal'
mode, it is recommended that breaks between small
katakana and
hiragana characters be allowed.
That is the preference in modern Japanese typography, that is especially
desirable for narrow columns. Japanese katakana words
tend to be long, and it is more preferable to allow line breaks to occur
among such characters than to have excessive expansion due to justification.
-
strict - selects a more restrictive line breaking mode for CJK
text. While the UA is free to define its own line breaking restrictions for
the 'strict' mode, it is recommended that the restrictions specified by the
JIS X-4051 be followed. That implies that in this mode,
small katakana and
hiragana characters are
not allowed to start a line.
In Japanese, a set of line breaking restrictions is referred to as
"Kinsoku". JIS X-4051
[JIS] is a popular source of reference for this behavior
using the strict set of rules. This architecture involves character
classification into line breaking behavior classes. Those classes are then
analyzed in a two dimensional behavior table where each row-column position
represents a pair action to be taken at the occurrence of these classes.
For example, given a closing character class and an opening character class,
the intersection in that table of these two classes (the first character
belonging to the opening class and the second belonging to the closing class)
will indicate no line breaking opportunity.
Note that both values, 'normal' and 'strict' imply that a set of line-breaking
restrictions is in use. In fact, there appears to be no valid line breaking
mode in CJK in which line breaks can appear just anywhere among ideographs.
Value: normal | break-all | keep-all
Initial: normal
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
This property controls line-breaking behavior inside of words. The values
described below are especially useful to Korean authors, but the property
itself is open to further, not yet specified settings for non-CJK authors.
Possible values:
-
normal - keeps non-CJK scripts together (according to their
own rules), while Hangul and
CJK (including the Korean
Hanja characters) break everywhere
or according to the rules of the 'line-break' mode.
-
break-all - same as 'normal' for CJK and
Hangul, but non-CJK scripts
can break anywhere. This option is used mostly in a context where the text
is predominantly using CJK characters with few non-CJK excerpts and it is
desired that the text be better distributed on each line.
-
keep-all - same as 'normal' for all non-CJK scripts. CJK and
Hangul are kept together.
This option should only be used in the context of CJK used in small clusters
like in the Korean writing system.
P.anywordbreaks { word-break: break-all }
Value: auto | inter-word | inter-ideograph | distribute |
distribute-all-lines | newspaper
Initial: auto
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
This property selects the type of justify alignment. It affects the text
layout only if 'text-align' is set to 'justify'. That way, UA's that do not
support this property will still render the text as fully justified, which
most of the time is at least partially correct.
The possible values are:
-
auto - The UA determines the justification algorithm to
follow.
-
inter-word - Selects the simplest and fastest full justification
behavior, which spreads the text evenly across the line by increasing the
width of the space between words only. The exact algorithm is determined
by the viewer. No expansion or compression occurs within the words. This
justification type does not affect the last line of the paragraph. This is
the initial value.
The diagram below illustrates this mode, by showing how the characters are
laid out in the last two lines of an element:
Figure 5.1.1: Mixed glyph layout in the last two lines in an inter-word
justified element
For example a viewer could render an 'inter-word' justified paragraph in
the following way:
Figure 5.1.2: Inter-word justification applied to mixed text
-
inter-ideograph - This is the ideographic analogue of the common
Latin full justification. This mode has the same scope as the 'distribute'
modes. It however restricts significantly the number of cases where expansion
can be performed. Basically inter-letter expansion is reserved to wide-cell
glyphs only. This is the preferred justification in the context of the Japanese
writing system, but not Latin nor Korean. In this mode the last line is not
justified.
The diagram below illustrates this mode:
Figure 5.1.3: Mixed glyph layout in the last two lines in an
inter-ideograph justified element
Below is an example of how this mode would work:
Figure 5.1.4: Inter-ideograph justification applied to mixed text
-
distribute - Similar to 'newspaper', in the sense that it selects
the justification behavior in which both inter-word and inter-letter spacing
is expanded and occasionally reduced to spread the text across the whole
line. Width increments are distributed evenly among the letters. This mode
relies less on the presence of space characters and related expansion thresholds.
This justification mode is intended for East Asian documents, especially
Thai. The distribution does not occur on the last line of the paragraph.
The diagram below illustrates this mode:
Figure 5.1.5: Mixed character layout in the last two lines of a distribute
justified element
For example a viewer could render a 'distribute' justified paragraph in the
following way:
Figure 5.1.6: Distribute justification applied to mixed text
-
distribute-all-lines - The same as 'distribute', but this affects
the last line of the paragraph too, regardless of its length. If for some
reason the last line cannot be distributed (for example if all it contains
is an image) then it should be center aligned. This type of justification
is intended mainly for ideographic text.
The diagram below illustrates this mode:
Figure 5.1.7: Mixed character layout in the last two lines of a
distribute-all-lines justified element
For example a viewer could render a 'distribute-all-lines' justified paragraph
in the following way:
Figure 5.1.8: Distribute-all-lines justification applied to mixed
text
-
newspaper - Selects the justification behavior in which both
inter-word and inter-letter spacing can be expanded or reduced to spread
the text across the whole line. Also, text distribution on any given line
may depend on the layout or the contents of the previous or the following
several lines. This is the significantly slower and more sophisticated type
of the full justify behavior preferred in newspaper and magazines, as it
is especially useful for narrow columns. For example, typically, compression
is tried first. If unsuccessful, expansion occurs: inter-word spaces are
expanded up to a threshold, and finally inter-letter expansion is performed.
The threshold value may be related to the column width (in number of characters).
The exact layout algorithm is determined by the viewer. In this mode the
last line is not justified.
The diagram below illustrates this mode:
Figure 5.1.9: Mixed character layout in the last two lines of a newspaper
justified element
Value: none | punctuation | punct-and-kana
Initial: punctuation
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
This sets the individual font blank space compression permissions for the
text justification algorithm, when 'text-justify' is anything other than
'inter-word'. This special type of space compression occurs on the font level,
i.e. the blank space within the character area itself may be reduced without
affecting the appearance of the glyph. This applies to wide-cell glyphs only.
Possible values:
-
none - No wide-cell font space compression is allowed.
Figure 5.2.1: Glyph layout with no compression
-
punctuation - Space can be taken away only from wide-cell
punctuation glyphs.
Figure 5.2.2: Glyph layout with punctuation compression
-
punct-and-kana - Space compression is allowed on wide-cell
punctuation and wide-cell Kana glyphs.
Figure 5.2.3: Character layout with punctuation and
Kana compression
Value: <percentage>
Initial: 0%
Applies to: block-level elements
Inherited: yes
Percentage values: as described
This property determines the minimum percentage of the text area width to
be used for distribution among the "elongation opportunities" in Arabic text,
when one of the justification modes is selected. Each elongation can be
accomplished using a number of
kashida glyphs or a single
graphic, if the UA is capable of creating such a graphic. (The font itself
determines the exact appearance of the kashida)
The UA is free to determine whether spaces inside of Latin text should be
treated as elongation opportunities as well (and elongated using blank space)
or not.
In the diagram below showing two identical paragraphs of Arabic text, the
blue line in the second line (not justified) shows the length that is allocated
for kashida and divided among
the elongation opportunities in the first line (justified), as indicated
by the red underlines:
Figure 5.3.1: Kashida applied to Arabic text
Value: simple | hanging
Initial: simple
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
This property determines whether a punctuation mark, if one is present, can
be placed in the margin area at the end of a full line of text, or not. This
is a common setting in East Asian typography.
Possible values:
-
simple - punctuation is not allowed to be placed in the margin
area. This results in a earlier line break.
Figure 6.1.1: No hanging punctuation allowed (the punctuation and
the character preceding it shown in blue for clarity)
-
hanging - punctuation, if present, is appended to the end of
the line of text even if there is no room for it in the line itself. It is
placed in the margin area.
Figure 6.1.2: Hanging punctuation
Here is an example:
Figure 6.1.3: Hanging punctuation appearing in the margin area (the
punctuation and the character preceding it shown in blue for clarity)
(Note that this property may in the future be expanded to cover other punctuation
behaviors behaviors for other types of punctuation as well, not just full-width).
Value: none | leading
Initial: none
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
This property determines whether or not a fullwidth punctuation mark character
should be trimmed if it appears at the beginning of a line, so that its "ink"
lines up with the first glyph in the line above and below. In some scenarios,
it may be preferable for the author not to allow leading punctuation marks
to be trimmed, for example when it is more important that the glyphs tend
to line up vertically. In other scenarios such an effect is desirable, for
example when it is more important for the author that as much text as possible
fits on a single line.
Possible values:
(Note that this property may in the future be expanded to cover other punctuation
behaviors for other types of punctuation as well, not just wide-cell.)
Value: none | letters | lines
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A
This property controls the creation of composite characters (a.k.a.
"kumimoji") or lines (a.k.a.
"warichu").
Possible values:
-
letters - combines glyphs to fit within the space of a single
wide-cell glyph, by reducing them in size and stacking them next to and/or
on top of each other. This effect is not directly defined in the JIS
[JIS] but is commonly used in Asian typography.
No more than 5 glyphs can be combined at a time. If more than five are included
inside of the element with this property setting, only the first five should
be combined. The rest should be rendered as regular text. The following texts
shows the arrangement for 2, 3, 4 and 5 characters:
Figure 6.3.1: The valid "Kumimoji" arrangements
The following markup:
SPAN.kumimoji { text-combine: letters }
could make the following 4 characters appear as one (shown in blue for clarity):
Figure 6.3.2: "Kumimoji" applied to four characters
-
lines - combines the glyphs so they fit into two lines of equal
length and height, whose combined height is equal to or slightly greater
than the height of the line they appear in, according to a special set of
rules [JIS]. The combined lines appear inline with the
surrounding text. This combination is restricted to two lines as specified
by the JIS. This is the typical usage found in Asian context for this feature.
Figure 6.3.3: Glyph layout in "Warichu"
The following markup:
SPAN.warichu { text-combine: lines }
would make the enclosed text look like the following (shown in blue for clarity):
Figure 6.3.4: "Warichu" applied to 10 characters
Note that "warichu" is allowed to break across lines,
though the exact algorithm to accomplish that can be non-trivial. Also,
Warichu text is usually enclosed within parentheses.
Those parentheses are inserted by the author.
Value: none | accent | dot | circle | disc
Initial: none
Applies to: all elements
Inherited: yes
Percentage values: N/A
This property sets the style for the emphasis formatting applied to text.
East Asian documents use the following symbols on top of each glyph to emphasize
a run of text: an 'accent' symbol, a 'dot', a hollow 'circle', or a solid
'disc'.
For example:
Figure 6.4.1: Accent emphasis (shown in blue for clarity) applied
to Japanese text
Note, that unlike
'text-decoration',
this property can affect the line height. Furthermore the emphasis style
should be distinguished from the text-decoration which is another method
to 'emphasize' text content.
Value: above | below
Initial: above
Applies to: all elements
Inherited: yes
Percentage values: N/A
This property sets the position of the emphasis symbols. They can appear
either 'above' or 'below' the emphasized run of horizontal text. 'Above'
and 'below' should be understood as relative to the line baseline.
In Japanese for example, the preferred position is 'above' when in horizontal
layout:
Figure 6.5.1: Emphasis (shown in blue for clarity) applied above a
fragment of Japanese text
In Chinese used in the PRC, on the other hand, the preferred position is
'below' when in horizontal layout:
Figure 6.5.1: Emphasis (shown in blue for clarity) applied below a
fragment of Chinese text
The table below summarizes the preferred emphasis mark position in horizontal
layout depending on the language:
| Language |
Preferred
emphasis position when horizontal |
| Japanese |
above |
| Chinese (Traditional) |
above |
| Chinese (Simplified) |
below |
Figure 6.5.2: Underline, emphasis and ruby position in vertical layout
depending on the language
In a vertical layout flow, if the position is set to 'above' then the emphasis
marks should appear on the right side of the vertical text column. If the
position is set to 'below', then the emphasis should appear the the left
side of the column. (See figure 2.5.1)
Value: <style> || <position>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: yes
Percentage values: N/A
This property is shorthand for
'font-emphasize-style' and
'font-emphasize-position'.
Value: none | [ideograph-numeric || ideograph-alpha || ideograph-space
|| ideograph-parenthesis]
Initial: none
Applies to: all elements
Inherited: yes
Percentage values: N/A
When a run of non-ideographic or numeric characters appears inside of ideographic
text, a certain amount of space is often preferred on both sides of the
non-ideographic text to separate it from the surrounding ideographic glyphs.
This property controls the creation of that space when rendering the text.
That added width does not correspond to the insertion of additional space
characters, but instead to the width increment of existing glyphs.
(A commonly used algorithm for determining this behavior is specified in
JIS X-4051 [JIS].)
This property is additive with the
'word-spacing'
and
'letter-spacing'
[CSS2] properties, that is, the amount of spacing contributed
by the 'letter-spacing' setting (if any) is added to the spacing created
by 'text-autospace'. The same applies to 'word-spacing'.
Possible values:
-
none - no extra space is created.
-
ideograph-numeric - creates extra spacing between runs of
ideographic text and numeric glyphs.
-
ideograph-alpha - creates extra spacing between runs of ideographic
text and non-ideographic text, such as Latin-based, Cyrillic, Greek, Arabic
or Hebrew.
-
ideograph-space - extends the width of the space character while
surrounded by ideographs.
-
ideograph-parenthesis - creates extra spacing between normal
(non wide) parenthesis and ideographs.
<SPAN style="text-autospace:none">[ideographs]1997[ideographs]</SPAN>
would appear as:
Figure 6.7.1: Mixed glyph layout when autospace is disabled
while:
<span STYLE="text-autospace:ideograph-numeric">[ideographs]1997[ideographs]</span>
would appear more like:
Figure 6.7.2: Mixed glyph layout when autospace is enabled
Value: auto | <length>
Initial: auto
Applies to: inline elements
Inherited: no
Percentage values: relative to line width
This property controls the amount of space a run of text is to fill or fit
into. If the specified amount is greater than that required by the text,
the glyphs are evenly distributed across that space. If the specified amount
is less than that required by the text, the glyphs are scaled horizontally
so as to make the text fit within the specified space.
The value 'auto' indicates that no special fill/fit behavior is to take place.
span.fitinseven { text-fit: 7em }
would cause a word to be rendered in the space of 7 'm' glyphs by adding
inter-letter spacing.
"Ruby" is the commonly used name for a run of text that appears in the immediate
vicinity of another run of text, referred to as the "base", and serves as
an annotation or a pronunciation guide associated with that run of text.
Ruby, as used in Japanese, is described in JIS X-4051
[JIS]. The ruby structure and the HTML markup to represent
it is described in the Ruby specification [RUBY]. This
section describes the CSS properties relevant to ruby.
Figure 7.1.1: Labeled example of ruby used in Japanese
In a UA that supports ruby, the ruby structure consists of three boxes. The
outermost container is the ruby [RUBY] element
itself. It is a container for two non-overlapping boxes: the ruby text box
and the ruby base box. The positioning of these two boxes relative to each
other is controlled by 'ruby-position'.
The width of the ruby box is by default determined by its widest child element,
whose width in turn is determined by its content. Both of ruby's children
assume the width of the widest one of them. In this respect, the ruby box
is much like a two-cell table element, with the following
exceptions:
-
the ruby box is an inline element, like an image, even though it itself,
like a table, is a container of (two) other boxes
-
both the ruby text and the ruby base boxes may overlap with adjacent text
if an appropriate 'ruby-overhang' parameter is set via
CSS.
If the ruby text is not allowed to overhang anything, then the ruby behaves
like a traditional box, i.e. only its contents are rendered within its boundaries
and adjacent elements do not cross the box boundary:
However, if ruby text is allowed to overhang adjacent elements and it happens
to be wider than its base, then the adjacent content is partially rendered
within the area of the ruby base box, while the ruby text may be partially
overlapping with the upper blank parts of the adjacent content:
Ruby text from one base can never overhang another ruby base.
The alignment of the contents of the base or the ruby text is not affected
by the overhanging behavior. The alignment is achieved the same way regardless
of the overhang behavior setting and it is computed before the space available
for overlap is determined. It is controlled by the
'ruby-align' property.
The exact circumstances in which the ruby text will overhang other elements,
and to what degree it will do so, will be controlled by ruby CSS properties.
This entire logic applies the same way in vertical ideographic layout, only
the dimension in which it works in such a layout is vertical, instead of
horizontal.
Note that the ruby text box may appear above or below the ruby base in horizontal
layout, and on the left or on the right in vertical layout.
Value: above | below | inline
Initial: above
Applies to: ruby element
Inherited: yes
Percentage values: N/A
This property is used on the ruby [RUBY]
element to control the position of the ruby text with respect to its base.
Possible values:
-
above - The ruby text appears above the base. This is the most
common setting used in ideographic East Asian writing systems. This is the
initial value.
Figure 7.3.1: Top ruby in horizontal layout applied to Japanese text
If the base appears in a vertical-ideographic layout mode, the ruby appears
on the right side of the base and is rendered in the same layout mode as
the base (i.e. vertical-ideographic).
Figure 7.3.2: Top ruby in vertical ideographic layout applied to Japanese
text
Note the special case of traditional Chinese as used especially in Taiwan:
ruby (made of Bopomofo glyphs)
in that context can appear along the right side of the base glyph, as if
the text were in vertical layout, but the bases themselves are rendered on
a horizontal line, since the actual layout is horizontal:
Figure 7.3.3: "Bopomofo" ruby in traditional
Chinese (ruby text shown in blue for clarity) in horizontal layout
In order to achieve that effect, vertical-ideographic layout should be set
on each individual ruby. That can be accomplished with the following simple
CSS rule:
ruby.bopomofo { layout-flow: vertical-ideographic }
Figure 7.3.4: Markup to achieve Taiwanese-style ruby in horizontal
layout
If the UA is capable of displaying ruby text above the base, then it must
not display the contents of the rp element
[ruby] when 'ruby-position' is set
to 'above'.
-
below - The ruby text appears below the base. This is a relatively
rare setting used in ideographic East Asian writing systems, most easily
found in educational text.
Figure 7.3.5: Bottom ruby in horizontal layout applied to Japanese
text
If the base appears in a vertical-ideographic layout mode, the bottom ruby
appears on the left side of the base and is rendered in the same layout mode
as the base (i.e. vertical-ideographic).
Figure 7.3.6: Top ruby in vertical ideographic layout applied to Japanese
text
-
inline - The ruby text appears inline following the base. The
contents of the rp element [RUBY] are displayed.
This is the setting that causes ruby to appear the way it would in UAs not
supporting the ruby markup.
ruby { ruby-position: inline }
when applied to the following content:
<ruby>AAA<rp>(<rt>aaa<rp>)</ruby>
will be displayed as:
AAA(aaa)
Figure 7.3.7: Inline ruby markup and its result
Value: auto | left | center | right | distribute-letter |
distribute-space | line-edge
Initial: auto
Applies to: all elements
Inherited: yes
Percentage values: N/A
This property can be used on any element to control the text alignment of
the ruby text and ruby base contents relative to each other. It applies to
all the ruby's in the element. The alignment is applied to the ruby child
element whose content is shorter: either the
rb or the
rt
[RUBY]. Possible values:
-
auto - The browser determines how the ruby contents are aligned.
This is the initial value. The behavior recommended by
[JIS] is for a wide-cell ruby is to be aligned in the
'distribute-space' mode:
Figure 7.4.1: Wide-cell text in 'auto' ruby alignment is
'distribute-space' justified
The recommended behavior for a narrow-cell glyph ruby is to be aligned in
the 'center' mode.
Figure 7.4.2: Narrow-width ruby text in 'auto' ruby alignment is centered
-
left - The ruby text contents are left aligned with the base.
Figure 7.4.3: Left ruby alignment
-
center - The ruby text contents are centered within the width
of the base. If the length of the base is smaller than the length of the
ruby text, then the base is centered within the width of the ruby text.
Figure 7.4.4: Center ruby alignment
-
right - The ruby text contents are right aligned with the base.
Figure 7.4.5: Right ruby alignment
-
distribute-letter - If the width of the ruby text is smaller
than that of the base, then the ruby text contents are evenly distributed
across the width of the base, with the first and last ruby text glyphs lining
up with the corresponding first and last base glyphs. If the width of the
ruby text is at least the width of the base, then the letters of the base
are evenly distributed across the width of the ruby text.
Figure 7.4.6: Distribute-letter ruby alignment
-
distribute-space - If the width of the ruby text is smaller
than that of the base, then the ruby text contents are evenly distributed
across the width of the base, with a certain amount of white space preceding
the first and following the last character in the ruby text. That amount
of whitespace is normally equal to half the amount of inter-character space
of the ruby text. If the width of the ruby text is at least the width of
the base, then the same type of space distribution applies to the base. In
other words, if the base is shorter than the ruby text, the base is
distribute-space aligned. This type of alignment is sometimes referred to
as the "1:2:1" alignment [JIS].
Figure 7.4.7: Distribute-space ruby alignment
-
line-edge - If the ruby text is not adjacent to a line edge,
it is aligned as in 'auto'. If it is adjacent to a line edge, then it is
still aligned as in auto, but the side of the ruby text that touches the
end of the line is lined up with the corresponding edge of the base. This
type of alignment is specified by [JIS]. This type of
alignment is relevant only to the scenario where the ruby text is longer
than the ruby base. In the other scenarios, this is just 'auto'.
Figure 7.4.8: Line edge ruby alignment
Value: auto | start | end | none
Initial: auto
Applies to: ruby element
Inherited: yes
Percentage values: N/A
This property determines whether, and on which side, ruby text is allowed
to partially overhang any adjacent text in addition to its own base, when
the ruby text is wider than the ruby base. Note that ruby text is never allowed
to overhang glyphs belonging to another ruby base. Also the UA is free to
assume a maximum amount by which ruby text may overhang adjacent text. The
UA may use the [JIS] recommendation of using one ruby
text character length as the maximum overhang length.
Possible values:
-
auto - The ruby text can overhang text adjacent to the base
on either side. [JIS] specifies the categories of characters
that ruby text can overhang. The UA is free to follow the
[JIS] recommendation or specify its own classes of characters
to overhang. This is the initial value.
Figure 7.5.1: Ruby overhanging adjacent text
-
start - Ruby text can overhang text that precedes it. That means,
for example, that ruby can overhang text that is to the left of it in horizontal
LTR layout, or it can overhang text that is above it in vertical-ideographic
layout.
Figure 7.5.2: Ruby overhanging preceding text only
-
end - Ruby text can overhang text that follows it. That means,
for example, that ruby can overhang text that is to the right of it in horizontal
LTR layout, or it can overhang text that is below it in vertical-ideographic
layout.
Figure 7.5.3: Ruby overhanging following text only
-
none - Ruby text cannot overhang any text adjacent to its base,
only its own base.
Figure 7.5.4: Ruby not allowed to overhang adjacent text
Value: ruby-text | ruby-base | ...
These two new values are added to the existing
'display'
property to represent the
rt and
rb
[RUBY] elements respectively. That way any element (e.g.
SPAN) could be made to behave as ruby via CSS.
-
"Bopomofo"
-
37 characters and 4 tone markings used as phonetics in Chinese, especially
standard Mandarin.
-
"Hangul"
-
Subset of the Korean writing system.
-
"Hanja"
-
Subset of the Korean writing system that utilizes ideographic characters
borrowed or adapted from the Chinese writing system. Also see
Kanji.
-
"Hiragana"
-
Subset of the Japanese writing system consisting of phonetic characters to
represent Japanese words. Also see
Katakana.
-
Ideogram, Ideograph
-
Character in the Chinese (or East Asian in general) writing system that
represents a thing or an idea but not a particular word or phrase for it.
-
"Kana"
-
Syllabic subset of the Japanese system of writing that can be used exclusively
for writing foreign words or in combination with
kanji.
-
"Kanji"
-
Subset of the Japanese writing system that utilizes ideographic characters
borrowed or adapted from Chinese writing. Also see
Hanja.
-
"Kashida"
-
Arabic elongation character.
-
"Katakana"
-
Subset of the Japanese writing system consisting of phonetic characters used
to represent Roman words. Also see
Hiragana.
-
"Kinsoku"
-
Japanese term for a set (or sets) of line breaking restrictions.
-
"Kumimoji"
-
Composite character consisting of up to 5 characters that are reduced in
size and combined to fit within the space of a single character.
-
Logograph, Logogram
-
Character in the Chinese (or East Asian in general) writing system that
represents an entire word.
-
Ruby
-
A run of text that appears in the vicinity of another run of text and serves
as an annotation or a pronunciation guide for that text.
-
"Tate chu
yoko"
-
Run of horizontal text inside of a column of vertical text; frequently used
in East Asian documents for displaying certain numbers, such as years.
-
"Warichu"
-
A run of text of reduced font size that appears inside of a line of text
as two lines of equal height and length
Note that the contents of this section are currently
under discussion among the XSL, CSS&FP and I18N Working Groups.
The list below summarizes [CSS2] properties and the meaning
they acquire in vertical layout. If vertical layout does not affect a given
property at all, that property is marked with a "N/A" (not applicable).
| CSS Property |
Effect in vertical layout |
| 'azimuth' |
N/A |
| 'background' |
relative (logical). See the simple properties for details. |
| 'background-attachment' |
N/A |
| 'background-color' |
N/A |
| 'background-image' |
N/A |
| 'background-position' |
relative (logical) to the element's layout-flow, i.e. top
becomes right if the element is rotated in vertical layout |
| 'background-repeat' |
relative (logical) to the element's layout-flow, i.e. repeat-x
becomes repeat-y if the element is rotated in vertical layout. |
| 'border' |
relative (logical) e.g. left border becomes top border around
elements that are rotated in vertical layout |
| 'border-collapse' |
N/A |
| 'border-color' |
relative (logical) i.e. the color of the left border becomes
the color of the top border around an element that is rotated in vertical
layout |
| 'border-spacing' |
relative (logical) to the orientation of the table, i.e.
horizontal spacing becomes vertical spacing in vertical layout |
| 'border-style' |
relative (logical), i.e. the style specified for the left
border becomes the style of the top border is the element is rotated in vertical
layout. |
| 'border-top'
'border-right'
'border-bottom'
'border-left' |
relative (logical) e.g. left border becomes top border around
elements that are rotated in vertical layout |
| 'border-top-color'
'border-right-color'
'border-bottom-color'
'border-left-color' |
ibid. |
| 'border-top-style'
'border-right-style'
'border-bottom-style'
'border-left-style' |
ibid. |
| 'border-top-width'
'border-right-width'
'border-bottom-width'
'border-left-width' |
ibid. |
| 'border-width' |
relative (logical), i.e. border width is always border width,
regardless of whether the border is vertical or horizontal or whether it
is used around an element that is rotated in vertical layout or not. |
| 'bottom' |
relative (logical) i.e. bottom becomes left around elements
that are rotated in vertical layout |
| 'caption-side' |
relative (logical) i.e. top becomes right for captions on
tables that are rotated in vertical layout |
| 'clear' |
relative (logical), e.g. left becomes top around elements
that are rotated in vertical layout |
| 'clip' |
relative (logical), i.e. the shape rectangle is rotated if
the element is rotated in vertical layout |
| 'color' |
N/A |
| 'content' |
N/A |
| 'counter-increment' |
N/A |
| 'counter-reset' |
N/A |
| 'cue' |
N/A |
| 'cue-after' |
N/A |
| 'cue-before' |
N/A |
| 'cursor' |
N/A |
| 'direction' |
relative (logical), i.e. ltr implies top-to-bottom character
progression in vertical layout |
| 'display' |
N/A |
| 'elevation' |
N/A |
| 'empty-cells' |
N/A |
| 'float' |
relative (logical), e.g. left becomes top around elements
that are rotated in vertical layout |
| 'font' |
see the description of the simple properties |
| 'font-family' |
N/A |
| 'font-size' |
relative (logical) i.e. the dimensions of each character rotate
with the character |
| 'font-size-adjust' |
relative (logical) i.e. the dimensions of each character rotate
with the character |
| 'font-stretch' |
relative (logical) i.e. the dimensions of each character rotate
with the character |
| 'font-style' |
N/A |
| 'font-variant' |
N/A |
| 'font-weight' |
N/A |
| 'height' |
relative (logical) e.g. height of an element that is rotated
in vertical layout becomes its length in the horizontal dimension |
| 'left' |
relative (logical) e.g. left becomes top around elements that
are rotated in vertical layout |
| 'letter-spacing' |
relative (logical), i.e. this controls the amount of spacing
between consecutive letters, regardless of whether one follows the other
horizontally or vertically |
| 'line-height' |
relative (logical), i.e. this controls the height of a line
if horizontal, or the width, if vertical |
| 'list-style' |
see the descriptions of the corresponding simple properties |
| 'list-style-image' |
images do not rotate in vertical layout by default |
| 'list-style-position' |
N/A |
| 'list-style-type' |
N/A |
| 'margin' |
relative (logical), e.g. left becomes top around elements
that are rotated in vertical layout |
| 'margin-top'
'margin-right'
'margin-bottom'
'margin-left' |
ibid. |
| 'marker-offset' |
relative (logical) i.e. the distance specified here rotates
with the LI content in vertical layout. |
| 'marks' |
N/A |
| 'max-height' |
relative (logical) i.e. height of an element that is rotated
in vertical layout becomes its length in the horizontal dimension |
| 'max-width' |
relative (logical) i.e. width of an element that is rotated
in vertical layout becomes its length in the vertical dimension |
| 'min-height' |
relative (logical) e.g. height of an element that is rotated
in vertical layout becomes its length in the horizontal dimension |
| 'min-width' |
relative (logical) e.g. width of an element that is rotated
in vertical layout becomes its length in the vertical dimension |
| 'orphans' |
N/A |
| 'outline' |
N/A |
| 'outline-color' |
N/A |
| 'outline-style' |
N/A |
| 'outline-width' |
N/A |
| 'overflow' |
N/A |
| 'padding' |
relative (logical), i.e. left becomes top around elements
that are rotated in vertical layout |
| 'padding-top'
'padding-right'
'padding-bottom'
'padding-left' |
ibid. |
| 'page' |
N/A |
| 'page-break-after' |
N/A |
| 'page-break-before' |
N/A |
| 'page-break-inside' |
N/A |
| 'pause' |
N/A |
| 'pause-after' |
N/A |
| 'pause-before' |
N/A |
| 'pitch' |
N/A |
| 'pitch-range' |
N/A |
| 'play-during' |
N/A |
| 'position' |
N/A |
| 'quotes' |
N/A |
| 'richness' |
N/A |
| 'right' |
relative (logical), i.e. right becomes left around elements
that are rotated in vertical layout |
| 'size' |
N/A |
| 'speak' |
N/A |
| 'speak-header' |
N/A |
| 'speak-numeral' |
N/A |
| 'speak-punctuation' |
N/A |
| 'speech-rate' |
N/A |
| 'stress' |
N/A |
| 'table-layout' |
N/A |
| 'text-align' |
relative (logical), i.e. justify justifies glyphs vertically
just as it does horizontally |
| 'text-decoration' |
relative (logical), i.e. underline appears on the left side
of a vertical column and overline appears on the right. |
| 'text-indent' |
relative (logical), i.e. it affects the amount of spacing
before the first letter in a paragraph. In horizontal layout, that
spacing is horizontal. In vertical layout, that spacing is vertical. |
| 'text-shadow' |
N/A |
| 'text-transform' |
N/A |
| 'top' |
relative (logical), i.e. top becomes right around elements
that are rotated in vertical layout |
| 'unicode-bidi' |
relative (logical), i.e. it affects letter progression regardless
of layout |
| 'vertical-align' |
relative (logical), e.g. top means right around elements that
are rotated in vertical layout layout |
| 'visibility' |
N/A |
| 'voice-family' |
N/A |
| 'volume' |
N/A |
| 'white-space' |
N/A |
| 'widows' |
N/A |
| 'width' |
relative (logical) e.g. width of an element that is rotated
in vertical layout becomes its length in the vertical dimension |
| 'word-spacing' |
relative (logical), i.e. this controls the amount of spacing
between consecutive words, regardless of whether one follows the other
horizontally or vertically |
| 'z-index' |
N/A |
This specification would not have been possible without the help from:
Ayman Aldahleh, Bert Bos, Stephen Deach, Martin Dürst, Laurie Anna Edlund,
Ben Errez, Yaniv Feinberg, Arye Gittelman, Richard Ishida, Koji Ishii, Masayasu
Ishikawa, Michael Jochimsen, Eric LeVine, Chris Pratley, Rahul Sonnad, Frank
Tang, Chris Thrasher, Masafumi Yabe, Steve Zilles.
-
[CSS2]
-
Cascading Stylesheets, level 2 (CSS2) Specification, W3C
Recommendation
-
Bert Bos, Håkon Wium Lie, Chris Lilley and Ian Jacobs, 12 May 1998
Available at:
http://www.w3.org/TR/REC-CSS2
-
[HTML4]
-
HTML 4.0 Specification, W3C Recommendation
-
Dave Raggett, Arnaud Le Hors and Ian Jacobs, 18 December 1997, revised 24
April 1998
Available at:
http://www.w3.org/TR/REC-html40
-
[JIS]
-
Line composition rules for Japanese documents
-
JIS X 4051-1995, Japanese Standards Association, 1995 (in Japanese)
-
[RUBY]
-
Ruby, W3C Working Draft
-
Marcin Sawicki, 22 March 1999
Available at:
http://www.w3.org/TR/WD-ruby
-
[XSL]
-
Extensible Stylesheet Language (XSL) Specification, W3C Working Draft
-
Stephen Deach, 21 April 1999
Available at:
http://www.w3.org/TR/WD-xsl
| Section |
Change |
| All sections |
-
replaced all occurrences of "fullwidth" width "wide-cell", "half-width" with
"narrow-cell", "cursive" with "connected", and "character" with "glyph" as
appropriate.
|
| 2.2 'layout-flow' |
-
removed 'horizontal-ideographic' from the list of values
-
modified figure 2.2.3 by putting the English text first, to indicate that
this is not a correct line flow for Japanese.
|
| 2.4 Relationship with Bi-directionality |
-
no longer referring to the DIR attribute in HTML, but rather to the
'bidi-override' and 'direction' properties in CSS
|
| 2.5 Relationship with other CSS |
-
clarified that the emphasis/ruby/underline behavior between horizontal and
vertical is consistent, i.e. "below" always becomes "left" and "above" always
becomes "right".
|
| Appendix A: Vertical Layout Effect on CSS Properties |
|
