●縦書タグと縦書スクリプト
 Ver:1.0
 形式:htc / js
 言語:JavaScript
 環境:IE6
 備考:
                       ⇒ V1.0 Download


・履歴
 ・7/11新規 Ver:1.0


・概要
   テキストを縦書きで表示する自作タグとスクリプトです。
   縦書き表示を試してみようとCSSで実行してみたのですが、か
  なり重くなる上にボールド指定フォントがおかしいような気がしま
  す。
   そこで、自分で縦書き表示タグを作ってみました。ただし、全角
  文字限定ですし、括弧や句読点などの処理はなんも考えてません。


・使用例
  1.自作タグ(htc)
  sample_image

  2.スクリプト(js)
●1行
あいうえお
●複数段複数行
 (複数のpreタグを使用)
一段目
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
らりるれろ
わをん
二段目
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
らりるれろ
わをん
三段目
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
らりるれろ
わをん
●1行(テーブルレイアウト使用)
あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん
●複数行(preタグを一つ使用)
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
らりるれろ
わをん
・注意点   1.半角文字は考慮していない。   2.括弧や句読点は考慮していない。 ・使用方法(htc)   1.html部に名前空間を指定する。(xmlns:ay)   2.import命令で縦書きタグビヘイビアを指定する。(vwrit.htc)   3.縦書きにしたい部分をvwritタグで囲む。     (<ay:vwrit>縦書き</ay:vwrit>)   4.以下は、使用例(自作タグ)で使用したHtml。 <html xmlns:ay> <head> <?import namespace="ay" implementation="vwrit.htc" > <style type="text/css"> ay\:vwrit{ font-family : 'MS 明朝'; line-height : 110%; letter-spacing : 2px; } pre.test{ font-family : 'MS 明朝'; line-height : 110%; letter-spacing : 2px; } </style> </head> <body> <table border="2" cellpadding="10px"> <tr><td> ●1行 <br /> <ay:vwrit>あいうえお</ay:vwrit> </td> <td rowspan="3"> ●複数段複数行<br /> (複数のpreタグを使用) <ay:vwrit> <pre class="test"> 一段目 あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん </pre> <pre class="test"> 二段目 あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん </pre> <pre class="test"> 三段目 あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん </pre> </ay:vwrit> </td> </tr> <tr> <td> ●1行(テーブルレイアウト使用) <table border="0"> <tr> <td><ay:vwrit>あいうえお</ay:vwrit></td> <td><ay:vwrit>かきくけこ</ay:vwrit></td> <td><ay:vwrit>さしすせそ</ay:vwrit></td> <td><ay:vwrit>たちつてと</ay:vwrit></td> <td><ay:vwrit>なにぬねの</ay:vwrit></td> <td><ay:vwrit>はひふへほ</ay:vwrit></td> <td><ay:vwrit>まみむめも</ay:vwrit></td> <td><ay:vwrit>やゆよ</ay:vwrit></td> <td><ay:vwrit>らりるれろ</ay:vwrit></td> <td><ay:vwrit>わをん</ay:vwrit></td> </tr> </table> </td> </tr> <tr> <td> ●複数行(preタグを一つ使用) <ay:vwrit> <pre class="test"> あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん </pre> </ay:vwrit> </td> </tr> </table> </body> </html> ・使用方法(js)    ジオシティーズなどは設置できるファイル拡張子が指定されてい   るので、htcファイルはアップロードできません。    そこで、jsファイルバージョンも載せておきます。   1.script記述部でsrc属性にvwrit.jsを指定する。   2.縦書きする要素を引数として、vwrit関数を呼び出す。   3.以下は、使用例(スクリプト)。 <html xmlns:ay> <head> <script type="text/javascript" src="vwrit.js"></script> <script type="text/javascript"> function fnStart(){ for( var cnt=0 ; cnt<document.all.vwrit.length ; cnt++ ){ vwrit( document.all.vwrit.item(cnt) ); } } </script> <style type="text/css"> span#vwrit{ font-family : 'MS 明朝'; line-height : 110%; } pre.test{ font-family : 'MS 明朝'; line-height : 110%; letter-spacing : 2px; } </style> </head> <body> <table border="2" cellpadding="10px"> <tr><td> ●1行 <br /> <span id="vwrit">あいうえお</span> </td> <td rowspan="3"> ●複数段複数行<br /> (複数のpreタグを使用) <span id="vwrit"> <pre class="test"> 一段目 あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん </pre> <pre class="test"> 二段目 あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん </pre> <pre class="test"> 三段目 あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん </pre> </span> </td> </tr> <tr> <td> ●1行(テーブルレイアウト使用) <table border="0"> <tr> <td><span id="vwrit">あいうえお</span></td> <td><span id="vwrit">かきくけこ</span></td> <td><span id="vwrit">さしすせそ</span></td> <td><span id="vwrit">たちつてと</span></td> <td><span id="vwrit">なにぬねの</span></td> <td><span id="vwrit">はひふへほ</span></td> <td><span id="vwrit">まみむめも</span></td> <td><span id="vwrit">やゆよ</span></td> <td><span id="vwrit">らりるれろ</span></td> <td><span id="vwrit">わをん</span></td> </tr> </table> </td> </tr> <tr> <td> ●複数行(preタグを一つ使用) <span id="vwrit"> <pre class="test"> あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わをん </pre> </span> </td> </tr> </table> </body> </html>
【 Back 】