リクエスト広場

特定の文字だけが小さく表示される

7 コメント
views
3 フォロー

「○(マル)」「□(四角)」などの記号や特定の文字だけが小さく表示されます。
「△(三角)」ぐらいの大きさに表示されると見やすいです。

PC閲覧時
Windows10Pro 20H2
Chrome93.0.4577.82(Official Build) (64 ビット)

モバイル閲覧時
iPhone8Plus iOS14.7.1
Chrome 93.0.4577.78とSafari14.1.2

アカサカ
作成: 2021/10/07 (木) 06:04:22
通報 ...
1
01v 2021/10/07 (木) 22:34:55 修正

一部の記号フォントが小さくなる問題は、以下の方法で対応ができます。

インライン
&font(monospace){0123ABCDabcd○●×△▲◇◆□■☆★↑↓→←あいうえおoO01lIij!/\~^-+*=%,.;:[](){}};

マルチライン
#font(monospace) {{
0123ABCDabcd○●×△▲◇◆□■☆★↑↓→←あいうえおoO01lIij!/\~^-+*=%,.;:[](){}};
}}

ただこのmonospaceは記号表記の統一感は出ますが、日本語フォントとしての見栄えは今一つかもしれません。
こだわるならインラインで部分的にフォントを変えるなど手を掛ける必要があります。

一部の記号が小さく表示される問題は、私が理解してる範囲では、wikiwikiで設定してるfont-famliyの優先順によるものです。
例えばフォントを特に指定しないときは、以下の並びの左から順に使われるフォントが決まります。

Verdana, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif

概ね半角の英数字はVerdana, Arialなどの欧文フォントが使われ、日本語などの全角文字は欧文フォントで表示できないのでHiragino系やMeiryoなどの日本語文字コードに対応したものが使われます。
複数候補の内どれが使われるかはそれぞの環境により異なり、先頭から読み込んでいって自身のOSにインストールされてるフォントが自動で選ばれます。

記号については扱いが複雑で、例えば
"●"はVerdana内に存在するのでこれが使われます。欧文フォントなので小さく表示されます。
"○"はVerdana内は存在しないがArialにはあるのでこれが使われます。これも欧文フォントなので小さくなります。
"△"は上記いずれも持ってなく、Hiragino(Mac系)かMeiryo(Win系)の日本語フォントで表示さるため大きくなります。
日本語環境では全角記号は全角で表示して貰いたいところですが、欧文フォントが中途半端に文字コードに対応してるために日本語フォントが食われた形になってます。

monospaceで記号が意図したように表示されるのは、monospaceのfont-famliyが以下のように設定されてるからです。

MS Gothic, Osaka-mono, Osaka, Meiryo, Hiragino Kaku Gothic ProN, Hiragino Sans, Menlo, Monaco, Courier New, Courier, monospace

先頭に並んでるMS GothicやOsakaは日本語に対応してるため基本的にこれらが使われます。ただmono系は等幅のフォントなので、記号は良いかもしれませんが文章表現には向いてないかもしれません。

関連リンク

3
アカサカ 2021/10/08 (金) 17:30:14 c9ed6@72591 >> 1

丁寧にご説明された返信ありがとうございます。
当サイトは、老舗のゲーム攻略サイトでして閲覧者の見やすさを重視してご提案いただいた方法を行いたいところですが、検索した結果、数百ページとさらに複数の該当箇所と表があります。現在、別の長期メンテナンス作業を行っています。膨大な時間を要して、とてもとても出来そうにありません。

1ページまるまるマルチラインで括ってしまうと逆に見にくくなる箇所が出てしまいます。
例:
変更前→変更後
5000~→5000~

目に止まったページのときに見つけて手が空いていたら、該当箇所に対してご提案の方法で行うか、エクセルなどに貼り付けて一括置換をしようと思います。どうもありがとうございます。

4
01v 2021/10/08 (金) 21:55:55 修正 >> 3

サイト全体を一括で変える方法は二つあります。
どちらも管理者権限が必要ですが。

一つは管理メニューのコントロール→デザイン
サイト全体のフォント設定を"デフォルト"→"等幅"に変更。
まずはこれで切り替えてみて文章を含めた全体の表示を確認してみるのがよいのではないでしょうか。
ただ、テキストエディターで表示してるような見た目になり、文章は見にくいかもしれません。

もう一つは置換機能で置換する手があります。
文字列置き換え
ただし使えるケースは限定的で、例えば表などで|○| → |&font(monospace){○};|とか決まった表現のときです。

もしサイト全体の単独の"○"を全部置換しようとすると、ページが多いときに変換中にタイムアウトで中断する可能性があります。中断されるまでの変換は行われるのですが、もう一度実行して変換不足を行おうとすると"&font(monospace){○}"で変換済みのところが、"&font(monospace){"&font(monospace){○}"}"みたいに二重に変換されます。この機能は正規表現に対応してないのでこういった対応が面倒です。

6
アカサカ 2021/10/09 (土) 08:03:40 c9ed6@7a140 >> 3

さらなるご提案ありがとうございます。

1つ目ですが、サイト全体のフォント設定を"デフォルト"→"等幅"に変更してみました。モバイル閲覧時は文字の見やすさに全く影響がなく、特定文字の○や□も通常文字と同じ大きさで大変良かったです。ご指摘どおり、PC閲覧時の文字が見にくくなっており、あえなく却下となりました。PC閲覧時でもモバイル閲覧時と同様の影響であれば、採用していました。

2つ目ですが、膨大なページ数のため、お伝えいただいたとおり変換中にタイムアウトで中断する可能性が大いにありました。有志者によって「◯」を使用するページも所々ありましたので、文字列置き換え機能を使って「○」→「◯」に変換しました。案の定、タイムアウトしましたが、すべて置き換えることに成功しました。
しかし、「□」などは機種依存文字「」(正確には代替になっていない)になってしまい、閲覧環境によって、文字化けするので置き換えできませんでした。当Wikiは日本語サイトですがAnalyticsにより、毎月70か国以上から多種多様のブラウザ・利用OSでアクセスが有ることを確認しているためです。
そこで、「□」→「&size(20){□};」で文字の大きさを変更して、無理やり問題を解決することといたしました。その他文字の小さい文字についても同様です。

運営へのお願い
根本的な解決に至っていませんが、どのWIKIでも使用頻度が多いと思われる通常表示が小さくなる特定文字「○」「●」「×」などは編集時に予め、通常文字と同じ大きさにサイズ変更される仕組みがあると良いのではないでしょうか。
>> 5のように欧文フォントを削って、新たなfont-familyを新設されることにも期待したいです。

7
アカサカ 2021/10/09 (土) 08:53:47 修正 c9ed6@7a140 >> 3

文字置き換えの最終チェックをしていたところ、
最初の一文字目に空白がある場合、&size(20){●};となってしまいました。

(空白)口口口
(空白)口●口
(空白)口口口
↓文字置き換え後、
(空白)口口口
(空白)口&size(20){●};口
(空白)口口口

当Wikiのような攻略サイトで最初の一文字目に「空白」を利用しているページが有る場合に&font(monospace)や&sizeを使ったフォントサイズ変更には要注意ですね。

最初の一文字目に「空白」を使用した場合であれば、「○」「●」「□」「■」は通常文字と同程度の大きさになるので、改善してほしいです。

5
01v 2021/10/09 (土) 00:24:46 >> 1

この件はサイト全体のフォント設定の選択肢をwikiwikiに増やしてもらうのが良いと思います。

和文フォント優先のfont-family。

現在選択できるfont-familyは以下。

ゴシック(sans-serifデフォルト)、
タイトゴシック(sans-serif-tight)
明朝(serif)
等幅(monospace)
レガシー(legacy-ui-gothic)

このうちmonospaceのみが和文フォント優先で、他は全部欧文優先です。
ただmonospaceについては等幅に特化したデザインになっており文章に適してません。monospaceが有用なのは表やプログラムソースのような表現です。よってmonospace以外にも和文を優先した選択肢が欲しいところです。

例えば、現在のデフォルトのゴシックは以下の設定になってるのですが。

Verdana, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif

これの欧文フォントを削って新たに以下のようなfont-familyを新設すれば、○●×などの記号も和文フォントで表示されるようになります。

Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif

どのように見えるかは実験的に以下の方法で確認できます。

適当なページを表示してブラウザのページをhtmlとして保存。
htmlをメモ帳などのテキストエディタで開く。
"font-family:"の行を検索して、Verdana, Arial,の部分を削除して保存。
編集したhtmlをブラウザーで開く。

VerdanaとArialを削ってしまうと何かしらの問題があるならば、削除せずに和文フォントより優先位置を下げる対応でもよいです。

欧文フォントで記号文字コードを持ってないフォントをセット

もしあるならば、欧文フォントで記号文字コードを持ってないフォントを優先位置にセットしてもらうでも良いと思います。
ただ以前調べたときは適当ものは見つけられませんでした。