nehan3.js:文章を縦書表示にするJs



日本文のテキストファイルを読込み、
縦書き表示にします。

1.CSSの記述例

(bodyタグにのフォント種類を指定してますが恐らく任意で大丈夫です)

<style type="text/css">
<!--
body{
	margin:2em 3em;
	font-family:'Meiryo','メイリオ', 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka','MS Pゴシック',sans-serif;
}
hr.space {
	background:#fff;
	color:#fff;
	visibility:hidden;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

2.ヘッダーとJavaScriptの記述例

日本文のテキストファイルdemo.txt(UTF-8のLF)を読込み表示します。
恐らく改行コードは何でも良いと思います。恐らく、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script charset="utf-8" type="text/javascript" src="nehan3.js"></script>
<script type="text/javascript">      
$(function(){
  $.get("demo.txt", function(text){
    Nehan3.Pagerize.createReader({
      direction: "vertical",
      text:text,
      width:640,
      height:480,
      fontSize:18,
      onStart : function(reader){
	// hook before parsing
      },
      onProgress : function(reader, percent, curPageCount){
	// hook during parsing
      },
      onComplete : function(reader){
	// hook after parsing
      },
      onWritePageStart : function(reader, pageNo){
	// hook write page before
      },
      onWritePageEnd : function(reader, pageNo){
	// hook write page after
      }
    }).start(document.getElementById("demo-target"));
  });
});
</script>

3.HTMLの記述例

    <div id="demo-target">
      <h2>読み込み中...</h2>
    </div>

nehan3.js:文章を縦書表示するデモページ

ソース元:nehan – dynamic layout engine written in JavaScript. – Google Project Hosting

htmlコーディングばかりやっていると、
テキストの縦表示にかなりの違和感がを覚えます。