半角英数文字データを試してあたふた
「table要素」の仕様や挙動を纏めたページを幾つか参考にして来ましたが、その中に「半角英数文字」のデータの挙動を例外としていた記事が、頭の片隅に残っていました。 これは、表に英語の単語や桁数の多い数などを書き込んだ場合です。
下は、「Blog Table ⭐」ver.3.5 で試したのですが、「Fix」モードであるにも関わらず、思いっきり「セル幅」が暴れています。 こんなはずではなかった (T_T)
まるで「Auto」モードの挙動の様で、最初はプログラムの落ち度かと思いましたが、先の記事の事を思い出し、「アルファベット」の文字種の関係を疑いました。 その結果、「半角英数の文字列」は「単語区切りの改行」の処理が行われ、「漢字の文字列」とは異なる振舞いをしてセル幅に影響する事が判りました。
CSSの関係するプロパティを弄ったのはかなり昔で、「word-break: break-all」の指定に辿り着くのに、少々時間がかかりました。
言語によって異なる禁則処理
これに関わるとややこしくて投げ出したくなる時がありますが、以下のページの説明は、さすがに判り易いです。
break-all
CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
❝
他の指定「word-break: break-word」「overflow-wrap: anywhere」でも、同様に改善します。 要は「単語区切りの改行」を抑止すれば、「Fix」モードの本来の操作を維持できます。
下は、「table要素」に「word-break: break-all」を指定した結果です。
セル幅の変更が、他のセル幅に全く影響せず、表幅の増減は変更したセル幅と一致する状態に戻せました。
なお、「漢字」と「英文字」の混成が表中にある場合、下の例では「word-break」の指定がなくても、問題はありません。
しかし、半角英数の文字列の途中で改行が有る場合は、表全体のセル幅の調整時の挙動が変になります。 下は「▲」の1ヵ所が改行しているだけですが、やはり変です。
ツールとして対処
上の結果から、表中の「半角英数文字」は、その文字列の途中で改行をさせない様にすれば、問題を回避できる事が判ります。 しかし、「word-break: break-all」を最初から指定しておけば、半角英数文字の表中の扱いが、とても楽になります。
調べを進めると「Fix」モードだけでなく「Auto」モードでも、半角英数文字が表を扱い難くする事が判りました。
「break-all」は、表内のテキストで禁則処理が全て無効になりますが、表内に「文章」を表示する使い方は、対象外で良いでしょう。 もし禁則処理が必要なら、手作業で改行を施せば済む話です。
以上の考え方から、「table要素」にデフォルトで「word-break: break-all」を指定する事にしました。「Blog Table ⭐」の「ver.3.5」は、既にこの行を追加して修正しています。
この指定の追加した事で、過去に作った表を更新した際に、表のレイアウトが変化した場合は、どうか許してください。 ◞(..)◟