1

目的
正円の中から外へはみ出さないテキスト文字数をカウントしたい

前提
・正円の中でテキストを折り返し表示
・文字の大きさは固定(em)
・テキスト数は可変

知りたいこと
例えば、文字の大きさが「1.2em」の場合、
円(外枠div枠)の「幅」=「高さ」と「文字の大きさ」と「文字数」には、どのような関係性が成り立ちますか?

div{
  display:inline-block;
  border-radius:50%;
  backgrounud-color:green;
}
<div>折り返し表示される
文字数可変のテキスト</div>

4
  • 1
    なぜカウントしたいのでしょうか? カウントすることによって実現したいことを教えてください。CSS の shape-outside で済む話かもしれません。
    – int32_t
    Commented 2023年5月22日 22:05
  • 実現したいことは、「可変なテキスト数で、正円の中から外へはみ出さないよう、テキストを自動折り返し(htmlで)表示すること」です。 「1 文字のフォントサイズ」と「テキスト文字数」が分かれば、そこから外へはみ出さない正円サイズを算出できるかもしれない、と思い質問しました。
    – re9
    Commented 2023年5月24日 15:03
  • 質問タイトルは文字数を求める方法を知りたいように読めますが、実際は円のサイズを求めたいのですね。
    – int32_t
    Commented 2023年5月24日 22:13
  • はい、そうです。
    – re9
    Commented 2023年5月25日 9:54

1 件の回答 1

2

「1文字のフォントサイズ」と「テキスト文字数」が分かれば、そこから外へはみ出さない正円サイズを算出できるかも

厳密に求めるなら、おそらく「円のサイズを仮決めしてから実際に文字を配置して足りるかどうかチェック」で二分探索する必要がある気がします。

簡単にするなら、「文字が占める予想面積の正方形が入る正円よりちょっと大きめ」ぐらいでいいんじゃないでしょうか。Math.sqrt(行の高さ * フォントサイズ * 文字数) / sin(45°) / 2 より少し大きい値を半径にします。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。