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. |
|
|
Related Posts by Categories
| Posted in »
0 comments: Responses to “ CSS RUBY-ALIGN ”