CSS3 Examples: CSS International

CSS LAYOUT-GRID-CHAR-SPACING

Written by jon on 12:42 AM

Asian languages often employ page layout for characters for better visual formatting using a one or two-dimensional grid. This property controls the character spacing granularity when the ‘layout-grid-mode’ is set to ‘char’ or ‘both’, and the ‘layout-grid-type’ property is set to ‘loose’. Visually, this property has an effect similar to the ‘line-height’ property.

Example

div { layout-grid-mode: both; layout-grid-type: loose; layout-grid-char-spacing: 15px }

<div style=”layout-grid-mode: both; layout-grid-type: loose;
layout-grid-char-spacing: 15px”>Content snapped to a layout grid</div>

Possible Values

Value Description

auto	The largest character in the font for the current element is used to determine the character grid spacing.
[length]	Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage]	The percentage is relative to the height/width of the parent element.

| Posted in » CSS International

CSS LAYOUT-GRID-CHAR

Written by jon on 12:41 AM

Asian languages often employ page layout for characters for better visual formatting using a one or two-dimensional grid. This property controls the size of the character grid for the layout of an element’s text content when the ‘layout-grid-mode’ is set to ‘line’ or ‘both’. Visually, this property has an effect similar to the ‘line-height’ property.

Example

div { layout-grid-mode: line; layout-grid-char: 12px }

<div style=”layout-grid-mode: line; layout-grid-char: 12px”>Content snapped to a layout grid</div>

Possible Values

Value Description

none	No line grid is used.
auto	The largest character in the font for the current element is used to determine the character grid.
[length]	Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage]	The percentage is relative to the height/width of the parent element.

| Posted in » CSS International

CSS LAYOUT-GRID-LINE

Written by jon on 12:39 AM

Asian languages often employ page layout for characters for better visual formatting using a one or two-dimensional grid. This property controls the grid length granularity when the ‘layout-grid-mode’ is set to ‘line’ or ‘both’. Visually, this property has an effect similar to the ‘line-height’ property.

Example

div { layout-grid-mode: both; layout-grid-line: 10px }

<div style=”layout-grid-mode: both; layout-grid-line: 10px”>Content snapped to a layout grid</div>

Possible Values

Value Description

none	No line grid is used.
auto	The largest character in the font for the current element is used to determine the character grid.
[length]	Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage]	The percentage is relative to the height/width of the parent element.

| Posted in » CSS International

CSS LAYOUT-GRID-TYPE

Written by jon on 12:38 AM

This property controls the type of layout grid used when rendering an element’s text content.

Example

div { layout-grid-mode: both; layout-grid-type: loose; layout-grid-char-spacing: 15px }

<div style=”layout-grid-mode: both; layout-grid-type: loose;
layout-grid-char-spacing: 15px”>Content snapped to a layout grid</div>

Possible Values

Value Description

loose	Indicates the line-grid commonly used in Chinese and Korean text display. Chinese characters, kana and wide characters have the grid applied. All other characters are rendered as if ‘layout-grid-mode' was set to “none” or “line”. CSS properties and values that would otherwise change the width of a character (such as ‘text-align: justify') are disabled.
strict	Indicates the line-grid used in Japanese text display. Narrow characters (except content from “cursive” fonts) get half the grid increment applied to wide characters. Wide characters receive a grid increment if no other width adjustment is used.
fixed	The type of line-grid used in mono-space layout. All characters receive and are centered within an equal grid spacing (except content from “cursive” fonts.) CSS properties and values that would otherwise change the width of a character (such as ‘text-align: justify') are disabled.

| Posted in » CSS International

CSS LAYOUT-GRID-MODE

Written by jon on 12:37 AM

Asian languages often employ page layout for characters to achieve better visual formatting using a one or two-dimensional grid. This property controls the type (if any) of the page layout grid to be used.

Example

div { layout-grid-mode: both; layout-grid-type: loose; layout-grid-char-spacing: 15px }

<div style=”layout-grid-mode: both; layout-grid-type: loose;
layout-grid-char-spacing: 15px”>Content snapped to a layout grid</div>

Possible Values

Value Description

both	Character (char) and line grid modes are enabled. This value allows full grid layout for an element.
none	No layout grid is used.
line	Only a line grid is used for the element. Recommended for inline elements.
char	Only a character grid is used for the element. Recommended for block-level elements.

| Posted in » CSS International

CSS LAYOUT-GRID

Written by jon on 12:35 AM

Asian languages often employ page layout for characters to achieve better visual formatting using a one or two-dimensional grid. The ‘layout-grid’ property is a shorthand method used to set the ‘layout-grid-mode’, ‘layout-grid-type’, ‘layout-grid-line’, ‘layout-grid-char’, and ‘layout-grid-char-spacing’ properties using a single property notation.

Example:
div { layout-grid: both loose 15px 15px 2cm }

Contentsnapped to a layout grid

| Posted in » CSS International

CSS LAYOUT-FLOW

Written by jon on 12:34 AM

This property controls the direction and flow of the content in an element. Its use is deprecated in favor of the ‘writing-mode’ property which accomplishes the same purpose.

Example

div { layout-flow: vertical-ideographic; }

<div style=”layout-flow: vertical-ideographic”>Content rendered vertically</div>

Possible Values

Value Description

horizontal

Character glyphs flow one after another from the source content from left to right, starting from the top of the element's rendering box. When a new line is started, it starts below the previous line at the left-hand side of the element's rendering box. This is the layout mode used in most Roman-based documents.

vertical-ideographic

Character glyphs flow one after another from the source content from top to bottom, starting from the right side of the element's rendering box. When a new line is started, it starts to the left of the previous line at the top side of the element's rendering box. Full-width characters are rendered with their top on the same side as the top of the rendering box, and half-width characters (select kana glyphs and western characters) are rendered rotated 90 degrees clockwise to the original rendering box's orientation. This layout mode is used in East Asian typography.

| Posted in » CSS International

CSS TEXT-KASHIDA-SPACE

Written by jon on 12:32 AM

A “Kashida” is a typographic effect that justifies lines of text by elongating certain characters at carefully chosen points. It is used in Arabic writing systems. This property controls the ratio of kashida expansion to white-space expansion when justifying lines of text in an element. The property can be used with any ‘text-justify’ justification mode where kashida-style expansion is used (”auto”, “distribute”, “kashida”, and “newspaper”.)

Example

div { text-align: justify; text-justify: newspaper; text-kashida-space: 75%; }

<div style=”text-align: justify; text-justify: newspaper; text-kashida-space: 75%;”>
This is “Newspaper” justified content with text-kashida-space set to “75%”.
But it won't do anything because the content is English.</div>

Possible Values

Value Description

inherit	Text is expanded using the text expansion value set on the parent element.
[percentage]	Refers to a ratio bteween kashida expansion and white-space expansion. 0% indicates white-space expansion only, while 100% indicates kashida expansion only.

| Posted in » CSS International

CSS TEXT-AUTOSPACE

Written by jon on 12:30 AM

This property controls the autospacing and narrow space width adjustment behavior of text. Ideographs are used in many Asian writing systems to represent concepts rather than letters or phonetic strings, and their interpretation may be context-sensitive. This property allows for spacing rules to take into account the presence of ideographs in document content.

Example

div { text-autospace: ideograph-numeric; }

<div style=”text-autospace: ideograph-numeric;”>This is numeric 123 and English 123 content. Imagine that the English has ideographic characters within, and you would get the idea of this property.</div>

Possible Values

Value Description

none	No extra spacing is added.
ideograph-alpha	Creates extra spacing between ideographic character groups and non-ideographic text (such as Latin-based, Cyrillic, Greek, Arabic, or Hebrew content.)
ideograph-numeric	Creates extra spacing between groups of ideographic text and numeric characters.
ideograph-parenthesis	Creates extra spacing between a normal (non-wide/half-width) parenthesis and ideograph characters.
ideograph-space	Extends the width of the space character when it is adjacent to ideographs.

| Posted in » CSS International

CSS TEXT-JUSTIFY

Written by jon on 12:28 AM

This property appears to offer a refinement on the “justify” value used in the ‘text-align’ property. Indeed, the “justify” value must be set for that property for ‘text-justify’ to have any effect.
‘Text-justify’ offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification models used in different language writing systems.

Example

div { text-align: justify; text-justify: newspaper }

<div style=”text-align: justify; text-justify: newspaper”>This is “Newspaper” justified content</div>

Possible Values

Value Description

auto	The browser will determine the appropriate justification algorithm to use
distribute	Justification is handled similarly to the “newspaper” value, but this version is optimized for East Asian content (especially the Thai language.) In this justification method, the last line is not justified.
distribute-all-lines	Behavior and intent for this value is the same as with the “distribute” value, but the last line is also justified.
inter-cluster	Justifies content that does not have any inter-word spacing (such as with many East Asian languages.)
inter-ideograph	Used for justifying blocks of ideographic content. Justification is achieved by increasing or decreasing spacing between ideographic characters and words as well.
inter-word	Justification is achieved by increasing the spacing between words. It is the quickest method of justification and does not justify the last line of a content block.
newspaper	Spacing between letters and words are increased or decreased as necessary. The IE reference says “it is the most sophisticated form of justification for Latin alphabets.”

| Posted in » CSS International

CSS IME-MODE

Written by jon on 12:27 AM

This property controls the state of the state of an Input Method Editor (IME) for user text entry fields. An IME is used in Asian languages to assist in the creation of characters from a large character set, using an entry device that contains only a small subset or an entirely different set of characters than the larger character set.

Example

input { ime-mode: deactivated }

<input type=”text” name=”text1″ value=”initial value” style=”ime-mode: deactivated”>

Possible Values

Value Description

auto	No change is made to the current IME entry mode. This value has the same effect as not specifying the ‘ime-mode' property.
active	The IME is initially enabled. All characters are then entered by default through the IME unless the user manually disables the IME.
inactive	The IME is initially disabled. The user may manually activate the IME.
deactivated	The IME is initially disabled and cannot be manually activated for the current field.

| Posted in » CSS International

CSS WRITING-MODE

Written by jon on 12:26 AM

This property controls the intrinsic writing direction rendering for a block of content. The default is left-to-right, top-to-bottom common in western languages, but the alternate rendering mode is top-to-bottom, right-to-left which is a common rendering mode used in Asian writing systems. The half-width character rotation effect is not cumulative - it is always rotated with respect to the canvas.

Example

div { writing-mode: tb-rl; }

<div style=”writing-mode: tb-rl”>Content rendered vertically</div>

Possible Values

Value Description

lr-tb

Character glyphs flow one after another from the source content from left to right, starting from the top of the element's rendering box. When a new line is started, it starts below the previous line at the left-hand side of the element's rendering box.

tb-rl

Character glyphs flow one after another from the source content from top to bottom, starting from the right side of the element's rendering box. When a new line is started, it starts to the left of the previous line at the top side of the element's rendering box. Full-width characters are rendered with their top on the same side as top of the rendering box, and half-width characters (select kana glyphs and western characters) are rendered rotated 90 degrees clockwise to the original rendering box's orientation.

| Posted in » CSS International

CSS WORD-BREAK

Written by jon on 12:25 AM

This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.

Example

div { word-break: keep-all }

<div style=”word-break: keep-all”>Western character set content mixed with a some Asian char content.</div>

Possible Values

Value Description

normal	Normal line breaking behavior for the language is used.
break-all	Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal'. Non-Asian character set content may be arbitrarily broken across lines.
keep-all	Useful where content contains a minority of Asian character set content, to which content is not broken across lines. For non-Asian character set content, this value behaves like ‘normal'.

| Posted in » CSS International

CSS LINE-BREAK

Written by jon on 12:24 AM

The Japanese language has especially strict rules regarding the conditions and characters after which a line may be broken. This property controls whether or not this strict line-breaking behavior is used.

Example

div { line-break: strict }

<div style=”line-break: strict”>Long bit of Japanese content that wraps at some point</div>

Possible Values

Value Description

normal	Normal line-breaking rules are applied to Japanese content.
strict	Strict line-breaking rules are enforced for Japanese content.

| Posted in » CSS International

CSS RUBY-POSITION

Written by jon on 12:22 AM

This property specifies the position of the helper Ruby Text (RT) relative to the Ruby content.

Example

ruby { ruby-align: right; ruby-position: above; ruby-overhang: whitespace }

<ruby style=”ruby-align: right; ruby-position: above; ruby-overhang: whitespace”>Ruby base content<rt>Ruby text</rt></ruby>

Possible Values

ruby { ruby-align: right; ruby-position: above; ruby-overhang: whitespace }

<ruby style=”ruby-align: right; ruby-position: above; ruby-overhang: whitespace”>Ruby base content<rt>Ruby text</rt></ruby>

| Posted in » CSS International

CSS RUBY-OVERHANG

Written by jon on 12:21 AM

This property describes how Ruby Text (RT) content will “hang” over other non-ruby content if the RT content is wider than the RUBY content.

Example

ruby { ruby-align: right; ruby-position: above; ruby-overhang: whitespace }

<ruby style=”ruby-align: right; ruby-position: above; ruby-overhang: whitespace”>Ruby base content<rt>Ruby text</rt></ruby>

Possible Values

Value Description

auto	RT content that is wider than the RUBY content hangs above other text content outside the RUBY.
none	RT content that is wider than the RUBY content only hangs above other text content adjacent to the RUBY (not including whitespace outside the RUBY.)
whitespace	RT content that is wider than the RUBY content hangs only above whitespace characters adjacent to the RUBY (not including text outside the RUBY.)

| Posted in » CSS International

CSS RUBY-ALIGN

Written by jon on 12:20 AM

This property specifies the horizontal alignment of the Ruby Text (RT) relative to the RUBY element content.

Example

ruby { ruby-align: right; ruby-position: above; ruby-overhang: whitespace }

<ruby style=”ruby-align: right; ruby-position: above; ruby-overhang: whitespace”>Ruby base content<rt>Ruby text</rt></ruby>

Possible Values

Value Description

auto	The browser determines how the Ruby Text (RT) is to be aligned. Content from Asian character sets will be aligned using the ‘distribute-space' method, while non-Asian character content will be aligned using the ‘center' method.
left	The left side of the Ruby Text (RT) is aligned with the left side of the Ruby content.
center	The Ruby Text (RT) is centered relative to the Ruby content
right	The right side of the Ruby Text (RT) is aligned with the right side of the Ruby content.
distribute-letter	If the width of the content of the Ruby Text (RT) is less than the width of the RUBY content, the letter-spacing of the RT content is set so that the content is evenly distributed across the width of the RUBY content. For RT widths greater than or equal to the width of the RUBY content, this value is treated like ‘center'.
distribute-space	If the width of the content of the Ruby Text (RT) is less than the width of the RUBY content, white space is added to the right and left of the RT content equal to half the kerning value of the RT content. Remaining horizontal space in the RT content is evenly distributed across the width of the RUBY content. For RT widths greater than or equal to the width of the RUBY content, this value is treated like ‘center'.
line-edge	If the Ruby Text (RT) is next to or adjacent to a line edge, it is aligned to that edge. Otherwise, it is center aligned. The IE reference is not very clear on what a “line edge” specifically IS.

| Posted in » CSS International

CSS DIRECTION

Written by jon on 12:19 AM

Text in some languages flows from right to left, while many other languages flow from left to right. There will inevitably be cases where left to right text and right to left content must be intermingled. Unicode allows for a complex process of determining the directional flow of content based on properties of the characters and content, as well as explicit controls for language “embeddings” and directional overrides. This algorithm should be used with bi-directional content as formatted by CSS. The ‘unicode-bidi’ and ‘direction’ properties specify how document content maps to the Unicode algorithm.
The ‘direction’ property specifies the base direction (reading order) for text content in an element. It is also meant to control the directionality of table columns, text overflow and positioning of justified text.

Example

div { unicode-bidi: embed; direction: rtl }

<div style=”unicode-bidi: embed; direction: rtl”>Bidi content right to left</div>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
ltr	Text flow is left-to-right.
rtl	Text flow is right-to-left.

| Posted in » CSS International

CSS UNICODE-BIDI

Written by jon on 7:18 AM

Text in some languages flows from right to left, while many other languages flow from left to right. There will inevitably be cases where left to right text and right to left content must be intermingled. Unicode allows for a complex process of determining the directional flow of content based on properties of the characters and content, as well as explicit controls for language “embeddings” and directional overrides. This algorithm should be used with bi-directional content as formatted by CSS. The ‘unicode-bidi’ and ‘direction’ properties specify how document content maps to the Unicode algorithm.

Example

div { unicode-bidi: embed; direction: rtl }

<div style=”unicode-bidi: embed; direction: rtl”>Bidi content</div>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
normal	The element will not open an additional level of embedding. In the case of inline elements, implicit Unicode character ordering will be applied across elements.
embed	Creates an additional explicit Unicode bidi embedding level, with the direction of the content specified by the ‘direction' property. Implicit Unicode character ordering is also obeyed.
bidi-override	Creates an additional explicit Unicode bidi embedding level (like the “embed” value), with the direction of the content specified ONLY by the ‘direction' property; ordering based on implicit Unicode character properties is not obeyed. This value literally overrides the normal Unicode ordering scheme.

| Posted in » CSS International

Subscribe to: Posts (Atom)