形式によるWeb転送とシャットダウン

ご存じのように、 「text-align：justify;」コンストラクトを使用してサイト上のテキストの幅を広げることは非常に推奨されません 。 主な問題は、単語のハイフネーションの欠如による単語間のギャップが大きすぎることです。



長い間、ブラウザは言葉そのものを運ぶことができませんでした。 ただし、最近では自動転送のサポートを伴う状況が改善し始めています。 Firefox 6は英語テキストのハイフネーションをサポートし始め 、Firefox 8のリリースでロシア語テキストに変わりました。 キャリアは、Safariの最新バージョンでも利用できます。 そのため、ブラウザーが自動転送をサポートしていない場合に、ロールバックを使用した形式でシャットダウンを使用して左側にシャットダウンする方法について考える時間です。



私の解決策のアイデアは表面にあります。 ページをロードするとき、長い単語を含む2つの狭い一時要素を作成し、そのうちの1つではハイフンを有効にします。 高さが大きい場合、ブラウザは自動転送をサポートします。



これは、アイデアを示すコードスニペットです。

<style> .hyphens { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } </style> <script type="text/javascript"> function is_hyphens () { function get_height (eItem) { var rect = eItem.getBoundingClientRect(); return rect ? (rect.bottom - rect.top) : eItem.offsetHeight; } var eHyphens = document.createElement('DIV'), eNoHyphens = document.createElement('DIV'); document.body.appendChild(eHyphens); document.body.appendChild(eNoHyphens); eHyphens.innerHTML = eNoHyphens.innerHTML = ''; // 1em    Safari,  2em  iPad eHyphens.style.width = eNoHyphens.style.width = '3em'; eHyphens.className = 'hyphens'; var result = get_height(eHyphens) > get_height(eNoHyphens); document.body.removeChild(eHyphens); document.body.removeChild(eNoHyphens); return result; } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモページで、ブラウザがサポートしている場合、最初のフラグメントはフォーマットシャットダウンとハイフネーションを使用します。







2番目（左にオフ）と3番目（フォーマットでオフ）のフラグメントが比較のために指定されており、ハイフネーションはありません。



このコードは、Windowsのメインブラウザー（IE10を除く）およびUbuntuの一部でテストしました。 ポートはWindows上のFirefox（上記のスクリーンショット）とSafariのみをサポートし、コードは両方のブラウザーで正しく機能します。 また、私のインストールでは、明らかに辞書がないため、Ubuntu Firefoxはロシア語を容認しません。



したがって、サポートされているブラウザおよび適切なサイトで、自動シャットダウンと共にフォーマットシャットダウンを使用できるようになりました。



この問題をどのように解決しますか？