1 css3 text extensions michel suignard microsoft corporation
TRANSCRIPT
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
18th International Unicode Conference Hong Kong, April 2001
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ث
بّلغة يونيكودبّلغة يونيكود
18th International Unicode Conference Hong Kong, April 2001
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)
18th International Unicode Conference Hong Kong, April 2001
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.
18th International Unicode Conference Hong Kong, April 2001
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.
水曜日Wednes
day
水曜日
Wednesday
水曜
日
19
18th International Unicode Conference Hong Kong, April 2001
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)
18th International Unicode Conference Hong Kong, April 2001
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
18th International Unicode Conference Hong Kong, April 2001
Examples of ideal width adjustment:
No adjustment:
〔〔英語 で日本は Japanese です。全然 123 分かりませんでした。〕〕
Adjusted:
〔英語 で日本は Japanese です。全然 123 分かりませんでした。〕
〔〕
(Note the adjustments around the brackets, Latin text and digits)
18th International Unicode Conference Hong Kong, April 2001
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)
18th International Unicode Conference Hong Kong, April 2001
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
18th International Unicode Conference Hong Kong, April 2001
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)
18th International Unicode Conference Hong Kong, April 2001
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
18th International Unicode Conference Hong Kong, April 2001
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
18th International Unicode Conference Hong Kong, April 2001
‘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)
18th International Unicode Conference Hong Kong, April 2001
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
18th International Unicode Conference Hong Kong, April 2001
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
18th International Unicode Conference Hong Kong, April 2001
Example
こ れ は 日 本 語 の 文 書
で す 。 This is an English sentence
18th International Unicode Conference Hong Kong, April 2001
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
18th International Unicode Conference Hong Kong, April 2001
Examples
慶應義塾けいおうぎじゅく
大学だいがく
Keio University
しょうかい とうきょう だいがく
ご紹介します。東京 大学。
18th International Unicode Conference Hong Kong, April 2001
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)
18th International Unicode Conference Hong Kong, April 2001
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)
18th International Unicode Conference Hong Kong, April 2001
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
18th International Unicode Conference Hong Kong, April 2001
Conclusions Major improvement in global
typography East Asian and South Asian writing
systems are much better presented But still a lot to do…