Menu
While going through the css drafts spec for display properties came across this property
display:ruby
A little bit of search explained that is used for showing Japanese characters .
833
Setting display to table makes the element behave like a table. So you can make a replica of an HTML table without using the table element and corresponding elements such as tr and td . For example, in HTML, you can make a table with the <table> element and also a <div> , or any container of your choice.
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. Formally, the display property sets an element's inner and outer display types.
CSS Ruby Layout is a module of CSS that provides the rendering model and formatting controls related to the display of ruby annotation. Ruby annotation is a form of interlinear annotation, consisting of short runs of text alongside the base text.
“display: inline-block” Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content).
From HTML5 docs
The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations
So basically you use it for pronunciation of any language. But it does not restricts you to using only for that.
68
I was having trouble with the a tag taking the whole block in an li, so, i used ruby and it didnt take the whole block space, nor did it ruin the format of the rest of the visual structure.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
