ウェブブラウザごとにPREタブの幅を設定する

Question

FirefoxとOperaでPREタブの幅を設定する方法はありますが、IEやChromeでこれを行うよく知られた方法やPREタグのハードタブ付きコードはありませんその結果として苦しむ。

pre { 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 
    white-space: -o-pre-wrap; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    -moz-tab-size: 1.5em; 
    -o-tab-size: 1.5em; 

    margin: 1em 0 0 0; 
    padding: 1em 1em 1em 1em; 
    width: 65%; 
} 

Answer 1

CSS 3のテキスト機能tab-sizeは、これまでの広い展開を見ていると、あまりにも新しい（そして十分にほぼ標準化されていない）である（プラスタブは、一般的には非常に人気がありません）。

ハードタグ付きコードの場合は、ページに配置する前にタブ/スペース変換を実行するだけです。

基本レイアウト

タブを汎用レイアウトタスクを実行するために意図されていませんでした（そしてそのために完全に適さないだろう）、丸い角よりもはるかに便利です。 CSS3のために宣伝されているより強力なレイアウト機能があります。たとえば、IE10のGridとFlexboxを参照してください。

Answer 2

MDNのtab-sizeページによると、適切な形式は次のとおりです。

tab-size: 4; 
-moz-tab-size: 4; 
-o-tab-size: 4; 

JavaScriptのフォールバック：

var fix_tab_size = function(pre, size) { 
    if(typeof fix_tab_size.supports === 'undefined') { 
     var bs = document.body.style; 
     fix_tab_size.supports = ('tab-size' in bs || '-o-tab-size' in bs || '-ms-tab-size' in bs || '-moz-tab-size' in bs); 
    } 
    if(!fix_tab_size.supports) { 
     if(typeof pre.each === 'function') { //jquery 
      $('pre').each(function() { 
       var t = $(this); 
       t.html(t.html().replace(/\t/g, new Array(size+1).join(' '))); 
      }); 
     } else if(typeof pre.innerHTML === 'string') { 
      pre.innerHTML = pre.innerHTML.replace(/\t/g, new Array(size+1).join(' ')); 
     } 
    } 
} 
$(function() { 
    fix_tab_size($('pre'),4); 
    //or 
    $.getJSON(src, function(data) { 
     fix_tab_size($data_pre.html(data.code)); //etc 
    }); 
});