Как выделить место для не визуализированного элемента (Использование псевдоэлементов)

Question

У меня есть этот код, который использует атрибуты данных для отображения текста ruby, но я бы хотел, чтобы основной текст не менял положение при переключении. Обычно можно использовать visibility: hidden, но в этом сценарии это не так. Какие еще есть варианты?

$(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>

Вот ссылка на код

Answer 1

Используя 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>