タグ・デザイン掲示板

[

【解決済】ルビの文字サイズについて
by mana

2021-06-13 08:44
　検索で色々調べてみたのですが、未熟者なので欲しい情報がなかなか見付からなく、新規トピの作成に至ります。過去にありましたら教えてくださると助かります。

　小説にルビ（ふりがな）表示をしており、スマホからの表示だとルビの文字サイズは納得できる大きさなのですが、パソコンからの表示となるとルビサイズが大きくなり、この文字サイズをパソコンからのみ小さい文字サイズに変更したいと思っています。
　HEAD内で<pc_only></pc_only>を使って<rt></rt>のfont-size変更を試みたのですが表示は変わらず、Google Chromeだからなのか、単に機能していないのかも分かりません。

　以下に、私が使っているHTMLを記します。

【小説内でのHTML】
<div class="topbox">小説タイトル<hr>
<div class="maintext">
　本文・・・・<ruby>爬虫類<rp>（</rp><rt>リザード</rt><rp>）</rp></ruby>系のモンスター・・・・
</div>
</div>

【HEAD内で小説に関連のあるHTML】
<style type="text/css">
body { font: 12px 'メイリオ';
　　　　letter-spacing: 2.2px;
　　　　line-height: 180%;
　　　　margin: 0;
　　　　padding: 0; }
.topbox { text-align: center;
　　　　　padding: 5em 2em 15em;
　　　　　margin: 0 auto;
　　　　　max-width: 450px;
　　　　　min-height: 800px; }
.maintext { text-align: left;
　　　　　　padding: 0em 0em 0em 1em;
　　　　　　font: 1em/2.2em 'メイリオ'; }
.maintext ruby { line-height: top; }
</style>

　質問投稿前に上記HEAD内に「 .maintext rt { font-size: 0.2em; } 」を追記しても、パソコンからのルビの文字サイズは変わらないため、<pc_only></pc_only>を使ったとしても解決できない状況と言うことに気付きました。久しぶりにHEAD内のHTMLを変更しているので、知識不足故の失敗かもしれません。
　ご教授いただければ幸いです。

pc
[編集]

by 774

2021-06-13 13:32
Chromeはブラウザ側で最小文字サイズが設定(デフォルト10px,ユーザー側で変更可能)されており、それが原因と思います。
なので上記が原因の場合は文字サイズの変更も大きくするものなら反映されていると思いますよ。

▼解決策
<style>要素間に下記を追加
@supports (zoom:1) {
     .maintext rt {
        font-size: 1em;
        zoom: .5;/* 文字サイズの倍率 */
     }
}

▼他
・CSSのインデントに全角スペースが使われているのが気になります。提示用の編集なら問題ありませんが、そうでない場合は半角スペースに変更してください。

・『line-height:top』は無効な指定です。現表示で問題ないのなら行ごと削除して問題ありません。

・ナノ独自機能以外の悩みの場合、サポート掲示板よりも検索サイトなりを活用したほうが解決の糸口が掴みやすいです。今後の参考までに。

---
追記(2021/06/13 14:38)
ごめんなさい提示コードに誤りがありました。
解決策の一行目を『(zoom)』→『(zoom:1)』に変更してください。(現在の文は修正済)

ブラウザの最小文字サイズの設定変更も、結局は「自分の閲覧環境」でしかないので閲覧環境のよる差異を減らすにはCSSなりJavaScriptなりで工夫していくしかありません。その点のみ留意を。

pc
[編集]

by mana

2021-06-13 14:20
774さん、お返事ありがとうございます。
まず全角スペースなのですが、仰る通り提示用の編集です。前置きせずにしてしまってすみません。
初心者ながら本を読み「line-height: top;」の記述をしておりましたが、助言通り削除させていただきました！これも知らなかったので、ありがとうございます。

「Chromeはブラウザ側で最小文字サイズが設定(デフォルト10px,ユーザー側で変更可能)されており…」についての情報は初耳だったので驚きました。
とりあえず解決策の情報通り、<style>～</style>間に追加してみたのですがルビサイズは（大きくも小さくもなく）変わらず、「文字サイズの変更も大きくするものなら反映されている」とも教えていただきましたので、もしかしたら小さくするのは困難なのかもしれない……と考えている次第です。
新規トピ前に検索サイトでも調べていましたが、なかなか欲しい情報が見付からなく、参考までにお訊ねさせていただきました。得た情報を元に、更に調べてみます。

追記.
　すみません！返事を優先して、投稿した後に「Chromeはブラウザ側で最小文字サイズが設定(デフォルト10px,ユーザー側で変更可能)されており…」について調べました。
　こういうことだったんですね……。（https://support.bccks.jp/faq/chrome-ruby/）
　理解が足りず、的外れな返事をしてしまいましてすみません。設定の最小フォントサイズを変更しましたら、ちゃんと小さく表示されました。本当にありがとうございます！！

更に追記.（2021/06/13 15:07）
　変更通りにしましたら、今度こそちゃんとルビ文字の大きさが小さくなりました！
　恥ずかしながらCSSやJavaScriptは出版されている本で独学中なのですがJavaScriptは全く理解ができず、基本的なCSS知識で乗り越えているような人間で、自分で検索しても<style>～</style>間でrt {font-size: ;}での変更しか見付からなく、困っておりました。
　今回教えていただいた「@supports」はインターネットで単体で検索すると基礎知識らしいのですが、手持ちの本には記載がなく、今回初めて触れることができました。今もどうやって調べたら教えていただいた情報に辿り着くのか調べながら追記してるのですが、全然着地できません…。なので、教えてくださって本当に助かりました。774さん、本当にありがとうございます！

pc
[編集]

[