全環境での文字の幅が分かれば完全互換ca作れるんじゃねという頭の悪い記事です
ある日なんとなくca関係の記事を読み漁っていたところ以下の文章を発見
https://yammaboo.sakura.ne.jp/weblog/180331.html
コメントの幅 算出されたフォントサイズで、コメントの内容を表示したときの幅と同じ（たぶん小数点以下切り上げ）です。
(javascript的にはcanvasAPIのmesureText()がおそらく利用されます。）
なるほど…measureText()を使えば幅が分かると。
プレイヤーのソースコード見た感じそれっぽい記述もあったんで多分使ってるでしょう。
つまりあらかじめ全ての視聴環境で全部の文字の幅を測っておけばコメントの幅を予測できるのでは？
やってみましょう
検証
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics#measuring_text_width
これのことか
https://www.geeksforgeeks.org/javascript/how-to-create-and-download-csv-file-in-javascript/
https://www.geeksforgeeks.org/javascript/how-to-insert-unicode-in-javascript/
はえ~
そんな感じで測るためのコードはすぐ完成。
ソースコード見たり目視で確認したりした結果，各環境でのフォントは次のように設定されていると推測
| 環境 | win10，win11 | iOSブラウザ，iOSアプリ(多分) | androidブラウザ | androidアプリ |
| 第一フォント | 游ゴシック | ヒラギノ角ゴシック | ヒラギノ角ゴシック | 源ノ角ゴシック(=Noto Sans) |
| フォールバック | Simsun, Arial, MSP Gothic | sans-serif | sans-serif | sans-serif(多分) |
アプリは中見てないんでフォールバックは予想
追記: 一応コード置いときます でもgitもgithubもちゃんと使うの初めてなんでなんかミスってるかも
https://github.com/wayi445/widthlist
(ここでiPadからファイルを送るのに苦戦)
6万行のcsvを何回かダウンロードしてできたのがこちら
https://docs.google.com/spreadsheets/d/1O8HF1fqjNomq_DPSuXJ0NO1qksTlx3FHRuj-7z5OMgs/edit?gid=0#gid=0
環境:iPad 9(ios26)，unihertz titan 2(android 16)
うーん数字が多い
androidの母数が1なのが少し不安ではあるがぜひコピーして遊んでみてください
一応各環境で実際のコメントと比較してみたけど合ってそう(証明画像面倒なので省略)
観察
条件付きフォーマットで色付けして分かりやすくしたりしたのを眺めて気付いたこと
ブラウザ間の差
win11でのfirefoxとchromeを比較してみる
- ほとんどの文字で幅は違うが小数点以下の処理？の差は小さい。
- 面倒なことに一部unicodeブロックではフォントが違うので差が大きい
- アクセント等はブラウザによって位置が変わるので幅の差が大きい
- 豆腐の幅はブラウザ依存っぽい
完璧に互換のある文字
- ほぼ全角文字(ひらがな，カタカナ，漢字，ブロック)だけ
- 空白はU+3000だけ
- それ以外の偶然全部の環境で幅が同じ文字はwin10で大体豆腐
win11/win10 もう笑うしかない(win10除けば互換あり)
気になった文字
- U+ffe8(￨)，U+ffed(￭) 互換あったんだ
- U+24bc(Ⓖ) なんでandroidブラウザで全角幅じゃないの，使い回し？
組み合わせ互換
これがやりたかったからこのスプシ作ったまである
とりあえず記号+空白で大体互換あるやつをいくつか
- 28(()+2800 半角括弧(){}が使える
- 268c(⚌)+2800 太いので使い道はいくらでもある ⚍⚎も
- 2770(❰)+2*a0 太いので使い道はいくらでもある
他にもたくさんあるのでこの先は自分の目で確かめてみよう!
空白じゃない記号と組み合わせて互換があるほうが使い道があるけど探すのが面倒すぎる
ちなみに普段使ってる¸„~ˑ¯‾はandroidブラウザでめっちゃ縮んでた。ブラウザとアプリでフォント違うって知らなかった頃に作ったので仕方無い
完全互換無理では
空白文字だけでも全部の環境で幅が違うのでブロックとU+3000で作れる人ならできるけど俺の作り方では無理では
誰か組み合わせ互換見つけるプログラム作ってくれないかな
ただpc以外から見てそこまで幅の変わらない文字だけ使えばそんなに崩れないのでそもそも完全互換なんて求める意味がないと少し思ったりもする。今回のデータはその「そこまで幅の変わらない文字」を見つけるのには役立つのでこの検証をやる意味はあったということにしよう。
一応注意として今回は幅しか見てないので線の高さとか点の位置とかの見た目の互換はちゃんと各環境で確認することを推奨
