Japanese title tokenizer

mixins/Japanese.pixy

@@ -0,0 +1,11 @@
+component Japanese(text string)
+	if arn.ContainsUnicodeLetters(text)
+		for _, token := range arn.TokenizeJapanese(text)
+			if token.NeedsFurigana()
+				a.japanese(href="http://jisho.org/search/" + token.Original, target="_blank", rel="noopener")
+					ruby(title=token.Romaji)= token.Original
+						rt.furigana= token.Hiragana
+			else
+				ruby.japanese(title=token.Romaji)= token.Original
+	else
+		span.japanese= text

pages/anime/anime.pixy

@@ -14,7 +14,7 @@ component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User, epis
 			//- else
 			if anime.Title.Japanese != anime.Title.Canonical
 				h2.anime-alternative-title
-					a(href="http://jisho.org/search/" + anime.Title.Japanese, target="_blank", title="Look up reading on jisho.org", rel="nofollow")= anime.Title.Japanese
+					Japanese(anime.Title.Japanese)
 
 			//- h3.anime-section-name.anime-summary-header Summary
 			p.anime-summary= anime.Summary
@@ -161,7 +161,7 @@ component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User, epis
 								span= episode.Number
 						td.episode-title
 							if episode.Title.Japanese != ""
-								span= episode.Title.Japanese
+								Japanese(episode.Title.Japanese)
 							else
 								span -
 						td.episode-actions

pages/anime/anime.scarlet

@@ -43,7 +43,8 @@
 	text-align left
 	font-weight normal
 	line-height content-line-height
-	a
+	
+	.japanese
 		color rgba(60, 60, 60, 0.5) !important
 
 .anime-actions

styles/typography.scarlet

@@ -27,4 +27,16 @@ p > img
 	max-width 100%
 	border-radius 3px
 	display inherit
-	margin 0 auto
+	margin 0 auto
+
+.furigana
+	opacity 0.25
+	transition opacity transition-speed ease, transform transition-speed ease
+	transform translateY(0)
+
+.japanese
+	color text-color
+	:hover
+		.furigana
+			opacity 1
+			transform translateY(-2px)