Posts tagged CSS International

CSS LAYOUT-GRID-CHAR-SPACING

0
2 years ago

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 }
Content snapped to a layout grid

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.

CSS LAYOUT-GRID-CHAR

0
2 years ago

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 }
Content snapped to a layout grid

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.

CSS LAYOUT-GRID-LINE

0
2 years ago

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 }
Content snapped to a layout grid

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.

CSS LAYOUT-GRID-TYPE

0
2 years ago

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 }

Content snapped to a layout grid

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

More >

CSS LAYOUT-GRID-MODE

0
2 years ago

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 }
Content snapped to a layout grid

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.

CSS LAYOUT-GRID

0
2 years ago

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

CSS LAYOUT-FLOW

0
2 years ago

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; }

Content rendered vertically

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.

More >

CSS TEXT-KASHIDA-SPACE

0
2 years ago

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%; }
This is “Newspaper” justified content with text-kashida-space set to “75%”.But it won’t do anything because the content is English.

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.
Go to Top