/* Ruby text*/
ruby {
display:inline-table;
text-align:center;
border-collapse:collapse;
/* border collapse mechanism will be used to adjust vertical alignment */
vertical-align:middle;
/* if ruby text contains text only and there are two ruby annotations
(one placed above the base and one below) then vertical centering roughly aligns baseline of
base with baseline of parent */
border-bottom:solid 0.75em transparent;
/* o.75em is height of ruby text (0.5000d7 1.2em = 0.6em)
plus space between baseline and text-bottom (about 0.15em)
this extra border is counter-weight used to restore vertical centering broken
by presence of ruby text (in case if there is only one ruby annotation,
if there are two annotations then counter-weight is no longer
necessary and can be annihilated using border collapse mechanism) */
}
ruby > rt, rtc
{
display:table-header-group;
}
/* used to move first ruby container above the base */
ruby > rb, rbc, ruby > rt + rt, rtc + rtc
{
display:table-row;
}
/* base and second ruby are formatted as table-rows */
ruby > rt + rt, rtc + rtc
{
border-bottom:hidden;
}
/* if there are two annotations then extra border is no longer necessary
and can be annihilated using border collapse mechanism */
rb, rbc, rt, rtc
{
white-space:nowrap;
}
/* prohibits line breaks inside ruby text */
rtc > rt, rbc > rb
{
display:table-cell;
}
/* used to distribute annotations in table like manner */
rtc > rt[rbspan]
{
column-span:attr(rbspan);
}
/* ruby text may span several cells */
ruby > rt, rtc
{
font-size:0.5em;
line-height:1.2em;
}
/* font-size of ruby text is reduced */
rp
{
display:none;
}
Thursday, January 19, 2012
Japanese format is WHAT?
Hopefully this little snippet of code will help someone else out. I needed to format some ruby text on an Android device where ruby text was not already supported. This is the CSS I used for WebKit on older Android devices. Hope it helps.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment