閲覧者がルビの表示・非表示を切り替えられるようにしたい。

Question

###前提・実現したいこと
漢字、カタカナにルビを表示させているのですが、表示ページすべての文字に対して、ルビを表示・非表示と切り替えられるボタンのようなものを組み込みたいのですが、どなたかご指南ください。

###発生している問題・エラーメッセージ
エラーは出ていないが、思っている動作を表現できない。

###該当のソースコード

<script>
function show_block(){
   if(document.getElementById("hoge").style.display == ""){
      document.getElementById("hoge").style.display = "none";
   }else{
      document.getElementById("hoge").style.display = "";
   }
}
</script>

<p><a href="javascript:void(0)" onclick="show_block();">表示切替</a></p>
<p><ruby>春<rp>（</rp><span id="hoge"><rt>はる</rt></span><rp>）</rp></ruby>がきた。</p>
<p><ruby>夏<rp>（</rp><span id="hoge"><rt>なつ</rt></span><rp>）</rp></ruby>がきた。</p>

id="hoge"は、あらかじめdisplay:none;で、非表示にしておく。

###試したこと
1ページにidは当然１つなので使えませんでした。
一つ目だけ反応します（意味ないです）
idをclassに変えて、document.getElementsByClassName("hoge")
としても反応がありませんでした。

CSSだけで実行できるのが理想的なのですが、勉強不足なJavaScriptを使ってみたら行き詰っています。

ページ内の全テキストルビはこれで表示・非表示切り替えられる。
というものがあれば、上に記入したソースは全部無視してください。

###補足情報(言語/FW/ツール等のバージョンなど)
今使われている主だったブラウザで動作してほしい。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[kei344]

質問タグにある「JAVA」は「JavaScript」の間違いでしょうか。あと、Rubytagは言語のほうのRubyだと思います。

Answer 1

<style>
rt {
	display: none;
}
.ruby_flag rt {
	display: block;
}
</style>
<script>
function show_block() {
	document.body.classList.toggle( 'ruby_flag' ); // IE10+
}
</script>
<p><a href="javascript:void(0)" onclick="show_block();">表示切替</a></p>
<p><ruby>春<rp>（</rp><rt>はる</rt><rp>）</rp></ruby>がきた。</p>
<p><ruby>夏<rp>（</rp><rt>なつ</rt><rp>）</rp></ruby>がきた。</p>
```**動くサンプル：**[https://jsfiddle.net/2n9mz3wd/](https://jsfiddle.net/2n9mz3wd/)

---

書かれている位置に span要素は仕様上置けませんので、削除してあります。

【rt 要素 - HTML | MDN】
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/rt](https://developer.mozilla.org/ja/docs/Web/HTML/Element/rt)
> 許可された親要素 	<ruby> 要素

【rp 要素 - HTML | MDN】
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/rp](https://developer.mozilla.org/ja/docs/Web/HTML/Element/rp)
> <rt> 要素の直前または直後に配置しなければなりません。

---

クラスを付与していますが、idを付与する方法でも同じようなやり方が使えます。
```JavaScript
document.body.setAttribute( 'id', 'ruby_flag' );

#ruby_flag rt {
	display: block;
}

【element.classList - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/classList

---

追記：

ruby の display がFirefoxの場合特殊なようで、CSSでの指定方法がわかりませんでした。なので、CSSを下記のように変えてみてください。rp にも対応できると思います。

ruby {
	ruby-position: over;
	ruby-position: before;
}
rt, rp {
	font-size: 0;
	opacity: 0;
}
.ruby_flag rt,
.ruby_flag rp {
	opacity: 1;
}
.ruby_flag rt {
	font-size: 50%;
}
.ruby_flag rp {
	font-size: 1em;
}
```**動くサンプル：**[https://jsfiddle.net/2n9mz3wd/2/](https://jsfiddle.net/2n9mz3wd/2/)

Comments

[runabo]

ありがとうございます。
「この動作をしてほしかった」というものになっていました。
同じ動きをするようなので今回はclassを使ってみます。

★質問に記載していなかったので、追加の質問です。
ルビは文字の上につくものだと思っていたのですが、文字の後ろにしかつけられないのでしょうか？
位置をCSSで上指定にしようかと思ったのですが、未対応のブラウザばかりで、
ruby-positionで指定しても反応はありませんでした。

https://developer.mozilla.org/ja/docs/Web/CSS/ruby-position

これが解決すれば完璧だと思います。
よろしくお願いいたします。

[退会済みユーザー]

これブラウザ仕様によっては

一期一会（）
一期一会（いちごいちえ）

と表示される気がするが

[runabo]

Firefoxを使っています。
Chromeだと完璧です。
両方windowsで確認していますがwindows、Mac、ブラウザ関係なく同じ見え方にしたいのです。（Macは友人に確認中）

Firefoxでは

一期一会いちごいちえ

と表示されルビの「いちごいちえ」は50%ぐらいの大きさです。
（）は付きません。
Firefoxが対応していないだけでしょうか？

Firefox、Chrome、IE、Edge、safari
など主だったブラウザで同じ見え方にしたいのです。
レイアウトが崩れるのを避けたいので。

ルビが文字の上に表示されても上下にズレますが、それを含めてレイアウトします。

[kei344]

To: haruka-kanataさん
はい。displayでの切り替えで書いていたため、そうなります。改訂版では多分大丈夫だと思います。

To: runaboさん
改訂版を追記しました。

[runabo]

ありがとうございました。
素晴らしい出来だと思います。

さっそくサイト制作に取り掛かろうと思います。

「動くサンプル」ページで
ruby {
ruby-position: over;
ruby-position: before;
}
rt, rq {
opacity: 0;
}
.ruby_flag rt,
.ruby_flag rq {
opacity: 1;
}

このようにまとめられて？いましたが、
短いほうがいいかと、こちらをコピーしてみたところ、
同じように動作したのでこちらを使用します。

しかし「.ruby_flag rq」とありますが、
「rp」が「rq」となっていても「（）」は表示しないので動作に影響がなかったということでしょうか？

winのファイアフォックス、macのクロムなどで期待通りの動作をしています。
ありがとうございました。

[kei344]

すいません、タイプミスです、直しておきます。