Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Collections:
Fanfiction Reference Works
Stats:
Published:
2020-01-13
Completed:
2020-01-13
Words:
366
Chapters:
2/2
Comments:
7
Kudos:
29
Bookmarks:
23
Hits:
1,710

Ruby Text

Summary:

A short tutorial for creating ruby text (furigana) in AO3, using CSS and HTML.

Chapter 1

Chapter Text

Ruby Text in AO3 Workskins

This workskin ruby! CSS allows one to have (right aligned) ruby text furigana in one's work. The ruby text is right-aligned to the parent element, and I have included a right:0px css tag if one wants to add a universal horizontal offset. For ease of use, one can put square brackets and braces around the ruby text and mass-replace them with the following rules.

  
[ :: <span class="ruby">
{ :: <span class="rt">
]} :: </span></span>

The introductory paragraph looks like this before replacement:

This [workskin{ ruby!}] CSS allows you to have (right aligned) [ruby text{ furigana}] in your work. For ease of use, you can put square brackets and braces around the ruby text and mass-replace them with the following rules.

CSS

#workskin .ruby {
position: relative;
}

#workskin .rt {
position: absolute;
font-size: 60%;
top: -0.5em;
right: 0px;
}

Chapter 2: Co-opting the SUP tag for CSS-stripped readability

Summary:

But what if the CSS is gone?

Chapter Text

Dealing with CSS stripping

There are times when one cannot rely on CSS to remain present, for example when a work is saved as a pdf. What's an author to do? Luckily, if one is willing to sacrifice the normal use of the superscript HTML tag - to a limited extent this lost functionality can be restored by use of unicode superscript characters - this present no trouble at all! Below is the sample paragraph from the first chapter, modified to use the SUP tag:

This workskin ruby! CSS allows one to have (right aligned) ruby text furigana in one's work. The ruby text is right-aligned to the parent element, and I have included a right:0px css tag if one wants to add a universal horizontal offset.For ease of use, one can put square brackets and braces around the ruby text and mass-replace them with the following rules.

  
[ :: <span class="ruby">
{ :: <sup>
}] :: </sup></span>

The introductory paragraph looks like this before replacement:

This [workskin{ ruby!}] CSS allows you to have (right aligned) [ruby text{ furigana}] in your work. For ease of use, you can put square brackets and braces around the ruby text and mass-replace them with the following rules.

CSS

#workskin .ruby {
  position: relative;
}

#workskin .rt {
  position: absolute;
  font-size: 60%;
  top: -0.5em;
  right: 0px;
}

#workskin sup {
  position: absolute;
  font-size: 60%;
  top: -0em;
  right: 0px;
}