Firefox で英語の文字が折り返されない問題の解決方法

テキストのレイアウトには、言語に応じていくつかの書式設定要件があります。たとえば、簡体字中国語では、カンマやセミコロンなどの句読点は行の先頭に表示されません。英語の場合、完全な単語は 2 行に表示されません。ブラウザは同様の原則に基づいてテキストを表示します。ただし、Web ページの幅の制限により、連続した非常に長い文字、数字、句読点は、それらが配置されている領域の幅の制限を超えてしまい、例 1 に示すように、ページの視覚効果に影響を与えます。この問題は、ユーザー入力情報を表示するときに特に顕著になります。ここでは、この問題を解決する方法について説明します。

CSS3 ドラフトでは、この問題を解決するために、word-wrap と word-break という 2 つの新しいプロパティがテキスト処理に追加されています。

1. {word-wrap:break-word;} : アジア言語と非アジア言語のテキストルールに従って単語内での改行を許可し、非アジア言語のテキスト行を任意の単語内で改行できるようにします。
2. {word-break:break-all;} : コンテンツは境界内で折り返され、必要に応じて単語の区切りも発生します。

一般的なブラウザのサポートは次のとおりです。

• [1] MSDNのCSS互換性とInternet Explorerから、IE8はIE6やIE7と同様にword-wrapとword-breakプロパティをサポートしていることがわかります。しかし、IE8beta2をテストしたところ、これら2つのプロパティはサポートされていないことがわかりました。IE8はまだベータ段階であり、最終的にはIE8がこれらをサポートすると信じているため、ページヘッダーで<meta content="IE=7" http-equiv="X-UA-Compatible" />を宣言して、IE8がIE7に従ってページを解釈するようにするのが良いでしょう。
• [2] Firefox 3.1はword-wrap属性をサポートする予定

{word-break:break-all;} では英語や数字の可読性が著しく低下し、連続する記号を折り返すことができないため、{word-wrap:break-word;} が比較的良い選択です。

しかし、ブラウザのサポートが不十分な場合、この問題を解決するには JavaScript に頼らざるを得ません。つまり、ブラウザが CSS ソリューションをサポートしていない場合は、連続する文字列の適切な位置に ​ 文字を挿入します (もちろん、 <wbr />と ­ も使用できます。ブラウザでのこれら 3 つの文字のサポートについては、ppk の「wbr タグ」を参照してください)。これらの文字は、ブラウザに書き込まれたときには表示されませんが、長い文字列を折り返します。具体的な実装コードは次のとおりです。

 function fnBreakWordAll(o){
 var o = o || {},
 iWord = o.word || 13,
 iRe = o.re || '[a-zA-Z0-9]',
 bAll = o.all || false,
 sClassName = o.className || 'word-break-all',
 aEls = o.els || (function(){
 var aEls = [],
 aAllEls = document.getElementsByTagName('*'),
 re = new RegExp('(?:^|\\s+)' + sClassName + '(?:\\s+|$)');
 for(var i =0,iLen = aAllEls.length; i < iLen ; ++i){
 if(re.test(aAllEls[i].className)){
 aEls[aEls.length] = aAllEls[i];
 }
 }
 return aEls;
 })() || [],
 fnBreakWord = function(oEl){
 // 基于http://www.hedgerwow.com/360/dhtml/css-word-break.html修改
 if(!oEl || oEl.nodeType !== 1){
 return false;
 }else if(oEl.currentStyle && typeof oEl.currentStyle.wordWrap==='string'){
 breakWord = function(oEl){
 oEl.runtimeStyle.wordWrap = 'break-word';
 return true;
 }
 return breakWord(oEl);
 }else if(document.createTreeWalker){
 var trim = function (str) {
 str = str.replace(/^\s\s*/, '');
 var ws = /\s/,
 i = str.length;
 while (ws.test(str.charAt(--i)));
 return str.slice(0, i + 1);
 }
 breakWord = function(oEl){
 var dWalker=document.createTreeWalker(oEl,NodeFilter.SHOW_TEXT,null,false);
 var node,s,c = String.fromCharCode('8203'),
 //re = /([a-zA-Z0-9]{0,13})/;
 re = new RegExp('('+ iRe +'{0,' + iWord + '})');
 while (dWalker.nextNode()){
 node = dWalker.currentNode;
 s = trim(node.nodeValue).split(re).join(c);
 node.nodeValue = s;
 }
 return true;
 }
 return breakWord(oEl);
 }
 };
 for(var i=0,n=aEls.length; i<n; ++i){
 var sUa = navigator.userAgent,
 sTn = aEls[i].tagName.toLowerCase() ;
 if((/Opera/).test(sUa) || (/Firefox/).test(sUa) || ((/KHTML/).test(sUa) &&
 (sTn === 'td' || sTn === 'th')) || bAll){
 fnBreakWord(aEls[i]);
 }
 }
 }

具体的なアプリケーションについてはデモ例をご覧ください。

fnWordBreakAll 関数はいくつかのカスタム パラメータを提供します。使用法とパラメータの意味は次のとおりです。

 fnWordBreakAll({word:15,re:'[\\w]',all:true});

この機能の核となる部分は、Hedger Wang 氏の JavaScript ソリューション「Cross Browser Word Breaker」を改良したもので、これは document.createTreeWalker と split メソッドを使用して、IE 以外のブラウザーで各文字の間に ​ を追加します。純粋な中国語のテキストには問題なく使用できますが、同氏が示した例をよく見ると、テキストに英語や数字が含まれている場合、改行の問題は解決しますが、テキストが読みにくくなり、文字間のスペースが広くなることがわかります。そのため、これに基づいて上記の改善を行いました。