ao3-styles/styles/ruby.css

52 lines
1.2 KiB
CSS

/*
* ruby.css
*
* Ruby / Furigana Emulation
*
* As of 2023-10, AO3 has now added support for <ruby>, making the span fallback obsolete. It is maintained here for posterity.
*
* As of 2022-12, AO3 does not support the <ruby> HTML tag, which is sanitized out of the usertext.
*
* To emulate ruby support in your usertext, build the HTML as follows:
* from:
<ruby> Text <rt> Annotation </rt> </ruby>
* to:
<span class="ruby"> Text <span class="rt"> Annotation </span> </span>
* See [1] for rationale and [2] for a progress report.
*
* [1] https://old.reddit.com/r/AO3/comments/qpn48k/ive_requested_ao3_to_add_support_for_furigana/
* [2] https://fandom.ink/@VeniaSilente/107174379581940635
*
* See also [3] for an alternative implementation. This stylesheet partially uses it as a styling source.
*
* [3] https://old.reddit.com/r/AO3/comments/10e3js0/tired_of_not_being_able_to_use_furigana_on_ao3_be/
* */
#workskin span.ruby
/* , #workskin ruby */
{
display: inline-block;
}
#workskin span.ruby > span.rt
font-family: sans-serif;
font-size: 65%;
color: gray;
}
#workskin span.ruby > span.rt {
margin-left: 1ex;
margin-right: 1ex;
}
#workskin span.rt:before {
content: "\28";
}
#workskin span.rt:after {
content: "\29";
}