Furigana shows in a different font
Stuart Calvin
Hi,
I'm hoping someone can help me get my furigana font to randomise! I have spent hours looking through forums and trying things with no great effect.
For context:
I have set up anki so that it randomises my font - it really helps me learn kanji - using 'Randomize Fonts new' add on. All of my card fronts are sentences with no furigana over the kanji, and on the back it shows the sentence with furigana. For some reason, the furigana always displays in the same font, even though the rest of the sentence is in the randomised font. For context, I am using a modified version of the core 6k cards. See the card details and the image of the issue below:
Card back
card front:
<div lang="ja">
<div class="mainContainer">
<div class="paperContainer">
<div class="cardSection">
<div class="subSection jpSentence">
<span class='Japanese'>{{JP-Sentence}}</span>
</div>
</div>
</div>
</div>
</div>
Card back:
<div lang="ja">
<div class="mainContainer">
<div class="paperContainer">
<div class="cardSection">
<div class="subSection jpTopic">
<span class='Japanese'>{{furigana:Topic-Reading}}</span>
</div>
<div class="subSection jpSentence">
<span class='Japanese'>{{furigana:Sentence-Reading}}</span>
</div>
</div>
<div class="cardSection">
<div class="subSection enTopic">
{{EN-Topic}}
</div>
<div class="subSection enSentence">
{{EN-Sentence}}
</div>
</div>
<div class="cardSection">
<center>{{Vocabulary-Audio}}{{Sentence-Audio}}</center>
</div>
<div class="tag">
Meaning
</div>
</div>
</div>
</div>
Styling:
@font-face {
font-family: "Open Sans Light";
src: url("_OpenSans-Light.ttf");
}
.night_mode {background_color:black}
/* Variables */
:root {
--background-color: #8AB0AE;
--paper-color: #FED6BC;
--tag-color: #AA9995;
--font-color-main: #303040;
--font-color-tag: #F3DED2;
}
/* Furigana Top Text */
rt {
font-size: 14px;
}
/* Furigana Base Text */
rb {
}
* {
margin: 0px;
padding: 0px;
font-family: "Open Sans Light";
}
/* Base Card Setup */
.mainContainer {
background-color: var(--background-color);
padding: 2em;
max-width: 100%;
height: auto;
}
/* Floating Paper Section */
.paperContainer {
background-color: var(--paper-color);
border-radius: 10px;
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
margin: auto;
padding: 6.5em 1.75em;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Paper Tag (e.g. Meaning) */
.tag {
background-color: var(--tag-color);
border-radius: 4px;
margin: 1em;
padding: 0.5em;
color: var(--font-color-tag);
font-size: 12px; /* Change Size Here */
line-height: 17px;
letter-spacing: 3px;
position: absolute;
top: 0px;
right: 0px;
writing-mode: vertical-lr;
text-orientation: upright;
text-transform: uppercase;
}
/* Shared Blocks (block1 -> Japanese | block2 -> English)*/
.cardSection {
margin: 1em auto;
}
/* Main Japanese Text */
jp {
}
/* Shared Block Interior */
.subSection {
width: 100%;
margin-bottom: 5px;
color: var(--font-color-main);
text-align: center;
text-shadow: 1.5px 1.5px #fff4e0;
}
/* Japanese Topic */
.jpTopic {
font-size: 40px;
line-height: 45px;
}
/* Japanese Sentence */
.jpSentence {
font-size: 20px;
line-height: 25px;
}
/* English Topic */
.enTopic {
font-size: 20px;
line-height: 25px;
}
/* English Sentence */
.enSentence {
font-size: 20px;
line-height: 25px;
}
Add ons
snowtimeglass
Could you share the things you have already tried?