縦書きWebページのつくりかた : おまけJavaScript

- スタイルシートで縦書きページを作ろう

おまけJavaScript

transformプロパティ未対応の古いブラウザ、およびInternet Explorer6未満のバージョンでは、ここで紹介しているスタイルシートでは表示に不具合を生じてしまいます。
transformでのフォント回転が効かないので、長音記号「ー」や括弧などが横字形のままになってしまうのですね。

そこで、こんなJavaScriptを用意してみました。

tate_replace.js：

/* tate_replace.js 
      written by tyz@freefielder.jp Oct.31.2010
      http://freefielder.jp/tate/
    CSS3のtransformに対応していない古いブラウザでも
    縦書きレイアウトを維持するためのJavaScript。
    縦書きエリアの中にある、横書きと縦書きで字形が異なる文字
    を置換します。
*/

window.onload = function(){
 var target = 'tate-area';  
 var ua = navigator.userAgent; 
 var version = window.opera ? (opera.version().replace(/\d$/, "") - 0) 
                      : parseFloat((/(?:IE |fox\/|ome\/|ion\/)(\d+\.\d)/.
                                   exec( ua ) || [,0])[1]);   
 
 /* Opera 10.5未満, Firefox 3.5未満, Safari 3未満, IE 6未満なら置換 */
 if( ( /Opera/g.test( ua ) && version < 10.5 ) || 
   ( /Firefox/g.test( ua ) && version < 3.5 ) || 
   ( ( !/Chrome/g.test( ua ) && /Safari/g.test( ua )) && version < 3 )  ||
   ( /MSIE/g.test( ua ) && version < 6 ) ){
  var orig_array = new originalSet();
  var original =  new RegExp( '[' + orig_array.join( '' ) + ']' , 'g' );
  var repl = new replaceSet();
  for( var i = 0 ; i < document.getElementsByTagName( 'div' ).length ; i++ ){
   if( document.getElementsByTagName( 'div' )[i].getAttribute( 'class' ) == target ){
    document.getElementsByTagName( 'div' )[i].innerHTML= 
     document.getElementsByTagName( 'div' )[i].innerHTML.replace(
      original , function(){
        return repl[ arguments[0] ];
       });
   }
   
  }
 }
 
 function originalSet(){ /* 置換すべき文字 */
  return Array(
    '「' , '」' ,
    '『' , '』' ,
    '（' , '）' ,
    '［' , '］' ,
    '｛' , '｝' ,
    '〈' , '〉' ,
    '《' , '》' ,
    '〔' , '〕' ,
    '【' , '】' ,
    '＜' , '＞' ,
    'ー' ,
    '〜',
    '…',
    '＝',
    '→',
    '←'
    );
 }
 
 function replaceSet(){ /* この文字に置換 */
  var rep = new Array();
  rep[ '「' ] = '\ufe41';
  rep[ '」' ] = '\ufe42' ;
  rep[ '『' ] = '\ufe43' ;
  rep[ '』' ] = '\ufe44' ;
  rep[ '（' ] = '\ufe35' ;
  rep[ '）' ] = '\ufe36' ;
  rep[ '［' ] = '\ufe39';
  rep[ '］' ] = '\ufe3a';
  rep[ '｛' ] = '\ufe37' ;
  rep[ '｝' ] = '\ufe38' ;
  rep[ '〈' ] = '\ufe3f' ;
  rep[ '〉' ] = '\ufe40' ;
  rep[ '《' ] = '\ufe3d' ;
  rep[ '》' ] = '\ufe3e' ;
  rep[ '〔' ] = '\ufe39';
  rep[ '〕' ] = '\ufe3a';
  rep[ '【' ] = '\ufe3b';
  rep[ '】' ] = '\ufe3c';
  rep[ '＜' ] = '\ufe3f' ;
  rep[ '＞' ] = '\ufe40' ;
  rep[ 'ー' ] = '\ufe31' ;
  rep[ '〜' ] = '\ufe31' ;
  rep[ '…' ] = '\ufe30' ;
  rep[ '＝' ] = '\u2016' ;
  rep[ '→' ] = '\u2193' ;
  rep[ '←' ] = '\u2191' ;
  
  return rep;
 }
}

Opera 10.5未満, Firefox 3.5未満, Safari 3未満, IE 6未満の場合、スクリプト内で指定されている横字形を、縦字形に置換して表示します。

使い方

保存した tate_replace.js を、htmlソースのヘッダ部分で読み込みます。

これで、このページが読み込まれたときに、アクセスしてきたブラウザの種類とバージョンを判定して、必要があれば文字の置換を実行します。

ダウンロード → tate_replace.tar.gz
あるいは…　 → tate_replace.js : テキストファイル