1 CSS3 Text Extensions Michel Suignard Microsoft Corporation

1

CSS3 Text Extensions

Michel SuignardMicrosoft Corporation

18th International Unicode Conference Hong Kong, April 2001

Contents Text layout flow Script classification Text justification Baseline alignment Line breaking Text decoration Document grid Ruby References Conclusion


Text layout ‘writing-mode’ allows to set a combination

of inline and block progression (like lr-tb, tb-rl, etc.)

‘direction’ only affects the inline progression

Doesn’t change character inherent directionality

ここ冬は寒

いですけれ

ども、雪あ

まり降りま

せん。ここ

冬は寒いで

すけれども、

雪あまり降

りません。

عندما يريدالعالم أن عندما يريدالعالم أن يتكّلDم، فهو يتحدDث يتكّلDم، فهو يتحدDث

بّلغة يونيكودبّلغة يونيكود


Relative positioning model This model considers the block

progression vector as a rotation vector Dimensions become related to the vector (a

height can be either vertical or horizontal) Easier to implement But hard to use by page authors Because of this, CSS3 seldom uses it Restricted to few cases like line-height, list-

style-position, etc.. BASE notation (Before, After, Start, End)


Physical positioning model The formatted area has a positioning

model independent from the writing mode A width is a width, a height is a height The container can be seen as having its

own dimension (height and width) independently of the contained text flow.

Applies to most CSS properties: width, height, border-right, margin-bottom, etc.


Glyph orientation Controls the glyph orientation

within the inline progression Used mostly in the context of

vertical writing to control the orientation of non ideographic text

But multi-character orientation changes are achieved by modifying their writing-mode value.

水曜日Ｗｅｄｎｅｓ

ｄａｙ

水曜日

Wednesday

水曜

日

19


Script property Some typographical behaviors are script

dependent (for example baseline adjustment)

Typically the effects will be governed by the inherent script properties of the text spans

However there are cases where we may want to override the default behavior (like Devanagari default baseline strategy)


Ideal width and text justification Ideal width is the result of the juxtaposition of

characters together It is independent of text alignment or text

justification, although expansion and compression may use opportunistically prior made ideal width adjustment

Example: auto-space and kerning (pair kerning and algorithmic kerning)

Justification always happens after ideal width adjustment


Examples of ideal width adjustment:

No adjustment:

〔〔英語で日本は Japanese です。全然 123 分かりませんでした。〕〕

Adjusted:

〔英語で日本は Japanese です。全然 123 分かりませんでした。〕

〔〕

(Note the adjustments around the brackets, Latin text and digits)


Text justification Is about finding the best letter distribution

within a given width Determine the best line breaking opportunity

with no expansion or small compression Otherwise take previous line breaking

opportunity and expand Compression and expansion are script

dependent behaviors Consequently ‘text-justification’ has various

values prioritizing various scripts (newspaper, inter-ideograph, inter-cluster, kashida)


Examples of text justification

This is a text with mixed English and Kanji Text. 東京で夏は無視圧かった。私の日本語だめです。英語で日本はJapaneseです。 Some English text全然分かりま 12345678せんでした。

This is a text with mixed English and Kanji Text. 東京で夏は無視圧かった。私の日本語だめです。英語で日本はJapanese です。 Some English text全然分かりま 12345678 せんでした。

distribute inter-ideographic


Justification related properties ‘text-last-align’ allows to specify a specific

alignment strategy for the last line, especially: Center Justify (last line is also justified) Single line fit (by adjusting font-size)

‘text-kashida’ determines the expansion ratio between the inter-word space and the inter Arabic letter elongation (Kashida)


Baseline alignment A set of four properties providing:

A default baseline alignment strategy for a formatted area

Definition or redefinition of appropriate alignment point for a glyph or other graphic element

An alignment strategy between conjunct elements (which alignment point to use)

Baseline shifting for a whole element (to provide the sub and superscript effects)

Covered thoroughly by another talk


Line breaking Western model based on the existence of

explicit word boundaries (white space) However many other writing systems have no

such boundaries (Chinese, Japanese, Thai, etc.) Most Ideographic systems allow for breaking

everywhere with exceptions (called Kinsoku rules in Japanese)

Cluster systems (Thai, Lao, Khmer) use dictionary based algorithm to detect word boundaries

CSS3 introduces fine tuning properties to adjust line breaking behaviors


‘line-break’ and ‘word-break’ properties ‘line-break’ allows tweaking of the Kinsoku

rules (concerning behavior of small Kana) ‘word-break-CJK’ fine tunes breaking

opportunities within predominantly CJK text (normal, break-all, keep-al)

‘word-break-wrap’ controls emergency word breaking and can be used when normal rules would create excessive text holes

‘word-break-inside’ controls the hyphenation behavior (normal, hyphenate)


Text decoration Complete revamping of the CSS2 model

Add individual control on each text-decoration variants: underline, overline, etc.

Add many new styles to these variants (dotted line, wavy, etc.),

Underline averaging (position and thickness)

‘text-decoration’ becomes a shorthand notation

1st a 1st a 1st a


Document grid Container based layout (grid) Content is centered in each grid cell (or

multiple cells) Grid constraint may be adjusted (loose,

strict, fixed) Grid dimension can be character size

based or not


Example

これは日本語の文書

です。 This is an English sentence


Ruby Text annotation mostly for East Asian

text, but can be used in other context Can be used in simple mode (one base

text, one annotation) or complex mode (multiple base text, multiple annotations)

Properties controlling annotation positioning, text distribution, and overhanging


Examples

慶應義塾けいおうぎじゅく

大学だいがく

Keio University

しょうかいとうきょうだいがく

ご紹介します。東京大学。


Ruby presentation properties ‘ruby-position’ controls the position of

the ruby text (annotation) relative to its base (before, after, right, inline)

‘ruby-align’ control the text alignment of the narrowest elements in a column of ruby text(s) and ruby base (auto, start, end, center, end, distribute-letter, distribute-space, line-edge)

‘ruby-overhang’ controls the ability to overhang (auto, start, end, none)


Browser supportFunctionality IE 5.0 IE 5.5

Writing mode No Yes

Ideal width Yes Yes

Text justification

Yes Yes

Line breaking Yes Yes

Grid Yes Yes

Simple ruby Yes Yes

(Support is in most cases partial, based on preliminary specification)


References Public CSS site: http://www.w3.org/Style/CSS/ Ruby annotation: http://www.w3.org/TR/ruby/ Ruby presentation:

http://www.w3.org/TR/css3-ruby/ International Layout:

http://www.w3.org/TR/1999/WD-i18n-format-19990910/ (a bit outdated)

More available on the W3C CSS WG site (W3C member only), the CSS3 Text module will become publicly available very soon


Conclusions Major improvement in global

typography East Asian and South Asian writing

systems are much better presented But still a lot to do…

Documents

1 CSS3 Text Extensions Michel Suignard Microsoft Corporation