前回の続きのようなものです。[html構文での改行制御]
この記事での結論は、ご期待に沿えるような回避方法ではないものになっていると思います。
さて、前回の最後に禁則処理というものに触れました。
先頭にくると違和感を覚える行頭禁止文字や、文章の行末に相応しくない行末禁止文字により、文章中に意図しない改行が発生するというものです。
正直なところ、システムとしてはブラウザの解釈にゆだねるべきである、と個人的に思いますが、ピクセル単位でレイアウトに気を使うような頭の固いWebシステムでは回避したい場合もあります。
FirefoxやGoogle Chromeでは、禁則処理による自動改行は基本的にオフのようですが、IEではCSSだけで回避するのは無理そうでした。
…逆に、FirefoxやGoogle Chromeで禁則処理を有効にするのも、わりと手間のようです。
ということで、今回はJavaScriptを使って頑張ってみました。
考え方としては単純で、文章中に行頭行末での禁止文字が表示域の境に来てしまうと駄目ということなので、表示域の端まで文章が来たら<br />タグでいったん文章を改行してしまえばよい、ということになります。
表示域の端を判断するのは、文字列のバイト数で判断することにしました。
半角文字を1バイト、全角文字を2バイトで計算することで、折り返しが何バイト目で行われるかを事前に判断し、改行タグを挿入します。
以下のテキストエリアに文字列を入力すると、テーブルに内容が反映されます。
FirefoxやGoogle Chromeでは禁則処理が行われないので、IEブラウザで試してみてください。
たぶん、”け"と"こ"の間で改行が発生しているかと思いますが、この辺りに括弧の開始や終了を挟むと、テーブルの左右で結果が変わるかと思います。
| 通常 | タグ付与 |
|---|---|
なお、この自動改行回避の意図としては、サーバサイドから渡された動的な文字列をクライアントサイドに画面表示する際に、自動改行されてしまうのを回避することを目的としています。
今回はJavaScriptで組みましたが、要諦としては、文字列を表示する前にバイト数で加工しましょう、という点にあります。
残念ながら、テキストエリア側での自動改行を回避する方法については、もう少し検討しなければなりません。
なぜなら、「タブ文字」というものがペーストで入力可能であり、1バイト文字のくせに全角文字より幅を占め、ブラウザによって長さが違うという残念な仕様があるからです。
こいつはレイアウトを構成する上で自動改行以上に悩まされる問題です。
