Return to Answer

ruby {
 display: inline-flex;
 flex-direction: column-reverse;
 margin-right: 0.5em; /* additional spacing */
}
rb, rt {
 display: inline;
 line-height: 1; /* spacing between rb & rt can be changed */
 text-align: left; /* my personal preference */
}

<ruby><rb>是</rb><rt>Thị</rt></ruby>
<ruby><rb>故</rb><rt>cố</rt></ruby>
<ruby><rb>空</rb><rt>không</rt></ruby>
<ruby><rb>中</rb><rt>trung</rt></ruby>

finally I found this SO answer and managed to replace JS code with CSS, the loading time is now enormously reduced

PS: I also de-jqueried my code

edit: the solution to my problem:

• remove completely the JS function
• wrap one ruby for each pair rb & rt with ruby, instead of having multiple pairs of them inside ruby
• use flex to render rather than the default display: block

ruby {
 display: inline-flex;
 flex-direction: column-reverse;
 margin-right: 0.5em; /* additional spacing */
}
rb, rt {
 display: inline;
 line-height: 1; /* spacing between rb & rt can be changed */
 text-align: left; /* my personal preference */
}

<ruby><rb>是</rb><rt>Thị</rt></ruby>
<ruby><rb>故</rb><rt>cố</rt></ruby>
<ruby><rb>空</rb><rt>không</rt></ruby>
<ruby><rb>中</rb><rt>trung</rt></ruby>

Some improvements:

• completely remove the JS function and replace with CSS (thanks to this SO answer ); this greatly reduces loading time
• wrap one ruby for each pair rb & rt with ruby, instead of having multiple pairs of them inside ruby
• use flex to render rather than the default display: block

The improved code:

ruby {
 display: inline-flex;
 flex-direction: column-reverse;
 margin-right: 0.5em; /* additional spacing */
}
rb, rt {
 display: inline;
 line-height: 1; /* spacing between rb & rt can be changed */
 text-align: left; /* my personal preference */
}

<ruby><rb>是</rb><rt>Thị</rt></ruby>
<ruby><rb>故</rb><rt>cố</rt></ruby>
<ruby><rb>空</rb><rt>không</rt></ruby>
<ruby><rb>中</rb><rt>trung</rt></ruby>

ruby {
 display: inline-flex;
 flex-direction: column-reverse;
 margin-right: 0.5em; /* additional spacing */
}
rb, rt {
 display: inline;
 line-height: 1; /* spacing between rb & rt can be changed */
 text-align: leftleft; /* my personal preference */
}

<ruby><rb>是</rb><rt>Thị</rt></ruby>
<ruby><rb>故</rb><rt>cố</rt></ruby>
<ruby><rb>空</rb><rt>không</rt></ruby>
<ruby><rb>中</rb><rt>trung</rt></ruby>

finally I found this SO answer and managed to replace JS code with CSS, the loading time is now pratically zero

PS: I also de-jqueried my code

edit: the solution to my problem:

• remove completely the JS function
• wrap one ruby for each pair rb & rt with ruby, instead of having multiple pairs of them inside ruby
• use flex to render rather than the default display: block

ruby {
 display: inline-flex;
 flex-direction: column-reverse;
 margin-right: 0.5em; /* additional spacing */
}
rb, rt {
 display: inline;
 line-height: 1;
 text-align: left
}

<ruby><rb>是</rb><rt>Thị</rt></ruby>
<ruby><rb>故</rb><rt>cố</rt></ruby>
<ruby><rb>空</rb><rt>không</rt></ruby>
<ruby><rb>中</rb><rt>trung</rt></ruby>

finally I found this SO answer and managed to replace JS code with CSS, the loading time is now enormously reduced

PS: I also de-jqueried my code

edit: the solution to my problem:

• remove completely the JS function
• wrap one ruby for each pair rb & rt with ruby, instead of having multiple pairs of them inside ruby
• use flex to render rather than the default display: block

ruby {
 display: inline-flex;
 flex-direction: column-reverse;
 margin-right: 0.5em; /* additional spacing */
}
rb, rt {
 display: inline;
 line-height: 1; /* spacing between rb & rt can be changed */
 text-align: left; /* my personal preference */
}

<ruby><rb>是</rb><rt>Thị</rt></ruby>
<ruby><rb>故</rb><rt>cố</rt></ruby>
<ruby><rb>空</rb><rt>không</rt></ruby>
<ruby><rb>中</rb><rt>trung</rt></ruby>

ruby {
 display: inline-flex;
 flex-direction: column-reverse;
 margin-right: 0.5em; /* additional spacing */
}
rb, rt {
 display: inline;
 line-height: 1;
 text-align: left
}

<ruby><rb>是</rb><rt>Thị</rt></ruby>
<ruby><rb>故</rb><rt>cố</rt></ruby>
<ruby><rb>空</rb><rt>không</rt></ruby>
<ruby><rb>中</rb><rt>trung</rt></ruby>

finally I found this SO answer and managed to replace JS code with CSS, the loading time is now pratically zero

PS: I also de-jqueried my code

finally I found this SO answer and managed to replace JS code with CSS, the loading time is now pratically zero

PS: I also de-jqueried my code

edit: the solution to my problem:

• remove completely the JS function
• wrap one ruby for each pair rb & rt with ruby, instead of having multiple pairs of them inside ruby
• use flex to render rather than the default display: block

ruby {
 display: inline-flex;
 flex-direction: column-reverse;
 margin-right: 0.5em; /* additional spacing */
}
rb, rt {
 display: inline;
 line-height: 1;
 text-align: left
}

<ruby><rb>是</rb><rt>Thị</rt></ruby>
<ruby><rb>故</rb><rt>cố</rt></ruby>
<ruby><rb>空</rb><rt>không</rt></ruby>
<ruby><rb>中</rb><rt>trung</rt></ruby>