How to allocate space for un-rendered element (Using pseud elements)

Question

I have this code that uses data attributes to display ruby text but I would like the main text not to change position upon toggle. Ordinarily one would use visibility: hidden but that doesn't seem to apply in this scenario. What other options are there?

$(function() {
  $("#furigana").click(function() {
    $(".jp").toggleClass("furigana_enabled", this.checked);
  });
});

.jp {
  font-size: 20pt;
}

.furigana_enabled {
  line-height: 2.1em;
}

.furigana_enabled .word {
  margin-right: 0.5em;
  position: relative;
  top: 0.6em;
  display: inline-block;
  white-space: nowrap;
}

.furigana_enabled .kanji::before {
  content: attr(data-reading);
  color: gray;
  font-size: 50%;
  line-height: 1;
  position: absolute;
  top: -0.5em;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="checkbox" id="furigana" checked /><label for="furigana">
    Furigana</label
  >
</div>
<hr />
<div class="jp japanese_gothic furigana_enabled">
  <span class="word"><span class="kanji" data-reading="きのう">昨日</span></span>

  <span class="word" title="noun"
    >すき<span class="kanji" data-reading="や">焼</span>き</span>

  <span class="word" title="particle">を</span>

  <span class="word" title="verb"><span class="kanji" data-reading="た">食</span>べました</span>

  <span class="word" title="punctuation">。</span>
</div>

Here's a link to the code

This answer on visibility might be helpful -- https://stackoverflow.com/a/54739370/9374498 — Z Kubota, Jan 30 '20 at 02:34

score 4 · Accepted Answer · answered Jan 30 '20 at 06:04

By using visibility you can achieve this

I set text before adding class and set it to hidden then on click show its visibility.

$(function() {
  $("#furigana").click(function() {
    $(".jp").toggleClass("furigana_enabled", this.checked);
  });
});

.jp {
  font-size: 20pt;
  line-height: 2.1em;
}
.word {
  margin-right: 0.5em;
  position: relative;
  top: 0.6em;
  display: inline-block;
  white-space: nowrap;
}
.kanji::before {
  content: attr(data-reading);
  color: gray;
  font-size: 50%;
  line-height: 1;
  position: absolute;
  top: -0.5em;
  white-space: nowrap;
  visibility: hidden;
}
.furigana_enabled .kanji::before {
  content: attr(data-reading);
  color: gray;
  font-size: 50%;
  line-height: 1;
  position: absolute;
  top: -0.5em;
  white-space: nowrap;
  visibility: visible;
}
.japanese_gothic {
  font-family: "HiraKakuPro-W3", "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><input type="checkbox" id="furigana" checked><label for="furigana"> Furigana</label></div>
<hr>
<div class="jp japanese_gothic furigana_enabled">
  
<span class="word"><span class="kanji" data-reading="きのう">昨日</span></span>
  
 <span class="word" title="noun">すき<span class="kanji" data-reading="や">焼</span>き</span>
  
<span class="word" title="particle">を</span>
  
<span class="word" title="verb"><span class="kanji" data-reading="た">食</span>べました</span>
 
<span class="word" title="punctuation">。</span>
  
</div>

How to allocate space for un-rendered element (Using pseud elements)

1 Answers1