shunito/boustrophedon.html

## boustrophedon.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>牛耕式文章</title>
    <link rel="stylesheet" href="asset/normalize.css">
    <script src="asset/jquery-1.11.1.min.js" type="text/javascript"></script>
<style type="text/css">
.box { width: 40%; border: 1px solid #CCC; margin:2em; padding:1em; line-height:1.4 }
.boustrophedon {
    text-align: justify;
    text-justify: inter-ideograph;
    font-family:"Osaka−等幅","ＭＳ ゴシック","monospace"; }
.boustrophedon span{ display:block; white-space: nowrap; }
.ltr { direction: ltr;  }
.rtl{ direction: rtl; unicode-bidi: bidi-override; position:relative; }
</style>
</head>
<body>

<div class="box boustrophedon" id="main">
<p>牛耕式（ぎゅうこうしき）、またはブストロフェドン（ギリシャ語:βουστροφηδόν、“耕す牛のように引き返す”の意）とは、写本や銘文の書記に用いられた古代の筆記方式。現代英語のように左から右へ、またヘブライ語やアラビア語のように右から左へ文字が並ぶのとは異なり、一行ずつ交互に逆方向へ読み進める。「ブストロフェドン」の名はギリシャ語に由来する。この語源はβους（牛） + στρεφειν（引き返す）で、書き手の手が前後に行ったり来たりするのが、畑の上で鋤を引く牛が一列の終わりで引き返すのに似ていることから来ている。</p>
<p>Safaiticなど多くの古代の文書には、牛耕式が頻繁に使用されたか、あるいは常用された。しかしギリシャでは先史時代の古い銘文に見られるのがほとんどで、ヘレニック時代には次第に使用されなくなっていった。</p>
<p>ラパ・ヌイの木版や他の陰刻の施された加工物にも、ロンゴロンゴと呼ばれる未解読の文字が牛耕式で書かれている。ロンゴロンゴでは、文章は一行ごとに180度回転させて書かれており、鏡文字にはなっていない。これは特にリバース・ブストロフェドン(reverse boustrophedon)と呼ばれる。</p>
</div>

<div class="box boustrophedon" style="visibility:hidden;">
<span id="ruler" style="visibility:hidden;position:absolute;white-space:nowrap;"></span>
<div id="wd" style="visibility:hidden;"></div>
</div>


<script type="text/javascript">
$( document ).ready(function() {

    function getFontSize(target){
        var div = $('<div style="display:none;font-size:1em;margin:0;padding:0;height:auto;line-height:1;border:0;">&nbsp;</div>');
        var size = div.appendTo(target).height();
        div.remove();
        return size;
    }

    function strWidth(str) {
        var e = $("#ruler");
        var width = e.text(str).get(0).offsetWidth;
        e.empty();
        return width;
    }

    function lr( c ){
       if( c ){ return 'ltr'; }
       return 'rtl';
    }

    function justify(){
        var width = $("#wd").width();
        var fontSize = getFontSize( ".boustrophedon" );

        $("#main").find("span").each(function(){
            var text = $(this).text(),
                l = text.length,
                w = strWidth(text),
                sp;

            if( width < (w + fontSize * 2) ){
                sp =  Math.floor( (width - w) / l * 100 ) / 100;
                $(this).css("letter-spacing", sp+"px" );
            }
        });
    }

    // boustrophedon
    function boustrophedon(){
        var width = $("#wd").width();
        var fontSize = getFontSize( ".boustrophedon" );
        var html = '', span = '';

        // オリジナルのHTMLを復帰
        $("#main").html( origin );

        $("#main p").each(function(){
            var p = this;
            var text = $(p).text();
            var len = text.length;
            var i =0 ,j, w, count = 0 , s = 0 ,str ='' , c = true , cl;
            html += '<p>';

            for(i=0; i< len ; i++){
                str += text.substr(i,1);
                w = strWidth(str);

                if( w >= width ) {
                    span = str;
                    j= i;

                    while( w > width ){
                        j--;
                        span = text.slice( s, j );
                        w = strWidth(span);
                    }
                    span = text.slice( s, j );

                    s = j;
                    str = "";
                    html += [ '<span class="', lr(c), '">' , span , '</span>'].join("");
                    c = !c;

                    if( i > j) { i = j-1; }
                }
            }

            span = text.slice( s  , len );
            html += [ '<span class="', lr(c), '">' , span , '</span></p>'].join("");
        });
        $("#main").html( html);

        justify();
    };

    // オリジナルのHTMLをとっておく
    var origin = $("#main").html()

    var timer = false;
    $(window).resize(function() {
        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            console.log("resize");
            boustrophedon();
        }, 200);
    });

    boustrophedon();

});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>牛耕式文章</title>
	<link rel="stylesheet" href="asset/normalize.css">
	<script src="asset/jquery-1.11.1.min.js" type="text/javascript"></script>
	<style type="text/css">
	.box { width: 40%; border: 1px solid #CCC; margin:2em; padding:1em; line-height:1.4 }
	.boustrophedon {
	text-align: justify;
	text-justify: inter-ideograph;
	font-family:"Osaka−等幅","ＭＳゴシック","monospace"; }
	.boustrophedon span{ display:block; white-space: nowrap; }
	.ltr { direction: ltr; }
	.rtl{ direction: rtl; unicode-bidi: bidi-override; position:relative; }
	</style>
	</head>
	<body>

	<div class="box boustrophedon" id="main">
	<p>牛耕式（ぎゅうこうしき）、またはブストロフェドン（ギリシャ語:βουστροφηδόν、“耕す牛のように引き返す”の意）とは、写本や銘文の書記に用いられた古代の筆記方式。現代英語のように左から右へ、またヘブライ語やアラビア語のように右から左へ文字が並ぶのとは異なり、一行ずつ交互に逆方向へ読み進める。「ブストロフェドン」の名はギリシャ語に由来する。この語源はβους（牛） + στρεφειν（引き返す）で、書き手の手が前後に行ったり来たりするのが、畑の上で鋤を引く牛が一列の終わりで引き返すのに似ていることから来ている。</p>
	<p>Safaiticなど多くの古代の文書には、牛耕式が頻繁に使用されたか、あるいは常用された。しかしギリシャでは先史時代の古い銘文に見られるのがほとんどで、ヘレニック時代には次第に使用されなくなっていった。</p>
	<p>ラパ・ヌイの木版や他の陰刻の施された加工物にも、ロンゴロンゴと呼ばれる未解読の文字が牛耕式で書かれている。ロンゴロンゴでは、文章は一行ごとに180度回転させて書かれており、鏡文字にはなっていない。これは特にリバース・ブストロフェドン(reverse boustrophedon)と呼ばれる。</p>
	</div>

	<div class="box boustrophedon" style="visibility:hidden;">
	<span id="ruler" style="visibility:hidden;position:absolute;white-space:nowrap;"></span>
	<div id="wd" style="visibility:hidden;"></div>
	</div>


	<script type="text/javascript">
	$( document ).ready(function() {

	function getFontSize(target){
	var div = $('<div style="display:none;font-size:1em;margin:0;padding:0;height:auto;line-height:1;border:0;"> </div>');
	var size = div.appendTo(target).height();
	div.remove();
	return size;
	}

	function strWidth(str) {
	var e = $("#ruler");
	var width = e.text(str).get(0).offsetWidth;
	e.empty();
	return width;
	}

	function lr( c ){
	if( c ){ return 'ltr'; }
	return 'rtl';
	}

	function justify(){
	var width = $("#wd").width();
	var fontSize = getFontSize( ".boustrophedon" );

	$("#main").find("span").each(function(){
	var text = $(this).text(),
	l = text.length,
	w = strWidth(text),
	sp;

	if( width < (w + fontSize * 2) ){
	sp = Math.floor( (width - w) / l * 100 ) / 100;
	$(this).css("letter-spacing", sp+"px" );
	}
	});
	}

	// boustrophedon
	function boustrophedon(){
	var width = $("#wd").width();
	var fontSize = getFontSize( ".boustrophedon" );
	var html = '', span = '';

	// オリジナルのHTMLを復帰
	$("#main").html( origin );

	$("#main p").each(function(){
	var p = this;
	var text = $(p).text();
	var len = text.length;
	var i =0 ,j, w, count = 0 , s = 0 ,str ='' , c = true , cl;
	html += '<p>';

	for(i=0; i< len ; i++){
	str += text.substr(i,1);
	w = strWidth(str);

	if( w >= width ) {
	span = str;
	j= i;

	while( w > width ){
	j--;
	span = text.slice( s, j );
	w = strWidth(span);
	}
	span = text.slice( s, j );

	s = j;
	str = "";
	html += [ '<span class="', lr(c), '">' , span , '</span>'].join("");
	c = !c;

	if( i > j) { i = j-1; }
	}
	}

	span = text.slice( s , len );
	html += [ '<span class="', lr(c), '">' , span , '</span></p>'].join("");
	});
	$("#main").html( html);

	justify();
	};

	// オリジナルのHTMLをとっておく
	var origin = $("#main").html()

	var timer = false;
	$(window).resize(function() {
	if (timer !== false) {
	clearTimeout(timer);
	}
	timer = setTimeout(function() {
	console.log("resize");
	boustrophedon();
	}, 200);
	});

	boustrophedon();

	});
	</script>
	</body>
	</html>