Skip to content

Instantly share code, notes, and snippets.

@EraYaN

EraYaN/furigana.css

Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EraYaN/f95dfa68c7e95187e054 to your computer and use it in GitHub Desktop.
Save EraYaN/f95dfa68c7e95187e054 to your computer and use it in GitHub Desktop.
Download ZIP
The furigana css and example html
Raw
furigana.css
/* /r/LearnJapanese furigana */
a[href$="/fg"], a[href$="#fg"], a[href$="/fgb"], a[href$="#fgb"] {
cursor: default !important;
text-decoration: none;
line-height: 1;
text-align: center;
display: inline-block;
color: inherit !important;
position: relative;
}
a[href$="/fgb"], a[href$="#fgb"] {
top: 0.8em;
margin-top:-0.8em;
margin-bottom: 0.5em;
}
/* For the ruby characters. */
a[href$="/fg"]:before, a[href$="#fg"]:before, a[href$="/fgb"]:after, a[href$="#fgb"]:after {
font-size: 0.70em;
font-weight: normal;
line-height: 1.2;
cursor: default;
text-decoration: none;
display: block;
content: attr(title);
position: relative;
}
/* Second option (then you can have furigana underneath aswell)*/
sup:before {
cursor: default !important;
text-decoration: none;
line-height: 1;
text-align: center;
display: inline-block;
color: inherit !important;
}
sup {
font-size: 0.70em;
font-weight: normal;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
display: block;
}
Raw
furigana.html
<!DOCTYPE html>
<html>
<head>
<title>Furigana tests</title>
<meta charset="UTF-8">
<link href="furigana.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>/r/LearnJapanese furigana</h1>
<p>Rest of the text is here and here and here and here.<br>
Rest of the text is here 漢字<a title="かんじ" href="#fg">漢字</a>漢字 and more.<br>
Rest of the text is here and here and here and here.</p>
<p><pre>&lt;a title=&quot;かんじ&quot; href=&quot;#fg&quot;&gt;漢字&lt;/a&gt;</pre>
On reddit: <pre>[漢字](#fg "かんじ")</pre>
<p>Rest of the text is here and here and here and here.<br>
Rest of the text is here 漢字<a title="かんじ" href="#fgb">漢字</a>漢字 and more.<br>
Rest of the text is here and here and here and here.</p>
<p><pre>&lt;a title=&quot;かんじ&quot; href=&quot;#fgb&quot;&gt;漢字&lt;/a&gt;</pre>
On reddit: <pre>[漢字](#fgb "かんじ")</pre>
<h1>Superscript furigana</h1>
<p>漢字<sup>かんじ</sup></p>
<p>
<pre>漢字&lt;sup&gt;かんじ&lt;/sup&gt;</pre>
On reddit:
<pre>漢字^(かんじ)</pre>
</p>
<p><sup>かんじ</sup>漢字</p>
<p>
<pre>&lt;sup&gt;かんじ&lt;/sup&gt;漢字</pre>
On reddit:
<pre>^(かんじ)漢字</pre>
</p>
<h1>W3C furigana/ruby (simple)</h1>
<p>これは<ruby><rb>紙芝居</rb><rt>かみしばい</rt></ruby>です。</p>
<p>
<pre>&lt;p&gt;これは&lt;ruby&gt;&lt;rb&gt;紙芝居&lt;/rb&gt;&lt;rt&gt;かみしばい&lt;/rt&gt;&lt;/ruby&gt;です。&lt;/p&gt;</pre>
</p>
<h1>W3C furigana/ruby (complex)</h1>
<p>
<ruby>
<rbc><rb>林</rb> <rb>和</rb> <rb>代</rb></rbc>
<rtc> <rt>はやし</rt><rt>かず</rt><rt>よ</rt> </rtc>
</ruby>
</p>
<p><pre>
&lt;ruby&gt;<br>
&lt;rbc&gt;&lt;rb&gt;林&lt;/rb&gt; &lt;rb&gt;和&lt;/rb&gt; &lt;rb&gt;代&lt;/rb&gt;&lt;/rbc&gt;<br>
&lt;rtc&gt; &lt;rt&gt;はやし&lt;/rt&gt; &lt;rt&gt;かず&lt;/rt&gt; &lt;rt&gt;よ&lt;/rt&gt; &lt;/rtc&gt;<br>
&lt;/ruby&gt;
</pre>
</p>
<p>
<ruby>
<rbc><rb>林</rb> <rb>和</rb> <rb>代</rb></rbc>
<rtc> <rt>はやし</rt><rt rbspan="2">かずよ</rt> </rtc>
</ruby>
</p>
<p><pre>
&lt;ruby&gt;<br>
&lt;rbc&gt;&lt;rb&gt;林&lt;/rb&gt; &lt;rb&gt;和&lt;/rb&gt; &lt;rb&gt;代&lt;/rb&gt;&lt;/rbc&gt;<br>
&lt;rtc&gt; &lt;rt&gt;はやし&lt;/rt&gt;&lt;rt rbspan=&quot;2&quot;&gt;かずよ&lt;/rt&gt; &lt;/rtc&gt;<br>
&lt;/ruby&gt;</pre>
</p>
<p><ruby>
<rbc><rb>民政局</rb></rbc>
<rtc><rt>みんせいきょく</rt></rtc>
<rtc><rt>ガバメント・セクシヨン</rt></rtc>
</ruby></p>
<p><pre>
&lt;ruby&gt;<br>
&lt;rbc&gt;&lt;rb&gt;民政局&lt;/rb&gt;&lt;/rbc&gt;<br>
&lt;rtc&gt;&lt;rt&gt;みんせいきょく&lt;/rt&gt;&lt;/rtc&gt;<br>
&lt;rtc&gt;&lt;rt&gt;ガバメント・セクシヨン&lt;/rt&gt;&lt;/rtc&gt;<br>
&lt;/ruby&gt;</pre>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment