transform未対応ブラウザでも縦書きレイアウトを保つ。 | freefielder.jp

transform未対応ブラウザでも縦書きレイアウトを保つ。

PC版へ 2010年10月31日

ということで、「CSS3のtransformを使った縦書きレイアウト用スタイルシート」を紹介しているのです。

　　→ 縦書きWebページプロジェクト (http://freefielder.jp/tate/ )

ところがコレは、transform未対応のブラウザでは、当然のように綺麗な縦書きになりません。長音記号「ー」が横に寝たままのかたちで表示されたり、括弧たちが横書き字形のままで表示されたり。

その不具合を解消するために、transform未対応ブラウザで閲覧したときは、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) // Opera10 shock
                      : 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;
  }
}

こいつを 'tate_replace.js' という名前のファイルに保存したら、縦書きCSSを使っているhtmlファイルのヘッダ部分で、

<html>
<head>
<script type="javascript" src="tate_replace.js"></script>
　　…
</head>

…なんて感じで読み込んでやればOKです。

内容は、

transform未対応ブラウザ( Firefox3.5未満、Opera10.5未満、Safari3未満 )、またはバージョン6未満のInternet Explorerでアクセスしてきた場合に、originalSet で定義されている横字形を、対応する縦字形( replaceSetで定義 )に置換する。

というもの。

これを使えば、ブラウザ互換性がさらにアップする筈。

アクセスしてきたブラウザのバージョン番号を取得するスクリプトは、以下のページ

　　→ お手軽ブラウザバージョン判定 - latest log

を参考にさせて頂きました。

Share on Mastodon

関連記事

<<前の記事 | HOME | 次の記事>>

コメント

現在、コメント機能は停止しています。