デザイン

【目指せePub出版】Webkitでtext-align:justifyに挑戦する

高橋文樹

2010 年 9 月 15 日
読了3分（2,278文字）
HTML5 iPhone Javascript 電子書籍

この投稿は 15年前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

ずっと黙っていようと思っていたんですが、誰も聞いてくれないので告白します。

近いうちに破滅派からePub長編小説を出版すべく、ISBNを取ったり、ePubの作り方を調べたりしています。

明日には原稿の校正を終え、あとはePubファイルを作るだけという状況です。

Appleに無視されてるテキスト両端揃え

iPhoneだと右端が揃わない

さて、今回のネタはAppleスタンダードから無視されている日本語Web組版の一助となるような内容のはず。すでに誰かがやっていた場合は無視してください。

HTML5+CSS3日本代表（？）である村上真雄さんが書いている通り、「SafariやChromeの元になっているWebkitではtext-align:jutifyが効かないので、両端揃えができない」のですが、これは電子書籍問題としてとてもまずいです。

Javascriptでjustify

というわけで、今回はJavascriptを用いて強引にそれっぽくしてみました。詳しくは写真をどうぞ。

基本的なアイデアとしては、以下の通りです。

Webkitでtext-align:justifyを指定することはできるが、text-jutifyプロパティがないので、半角スペースの部分でしか字間を調整してくれない。
日本語は基本的に半角スペースによる分かち書きをしない（してる人も少しいる）ので、Webkitが半角スペース(inter-word)以外でも字間を調整してくれようになるのを待つしかない。
それは嫌なので、とりあえずすべての字間に幅0の半角スペースを突っ込みまくって調整させればよくない？

ということです。Javascriptで実装したのは、Webkitがtext-justifyプロパティに対応した場合、すぐ外せるからです。getComputedStyleメソッドとかでプロパティの有無を調べてから実行する形式にするともっといいかもしれません。

ソースはこんな感じです。

css

.kusabi{
	width:0;
	font-size:0;
	overflow:hidden;
}

Javascript(MooTools利用)

window.addEvent("domready", function(e){
	//字間を調整しない文字のリスト。要更新。
	var list = /[a-zA-Z0-9／「」〈〉《》￥［］〔〕,.""ヶッゞ。、・ー]/;
	//時間調整用のspanタグ。半角スペースのみを含む。
	var s = "<span class=\"kusabi\"> </span>";
	//対象となるpタグに対して反復処理。
	//ここではpタグが含むテキストに対して処理を行っているが、
	//本来はテキストノードに対して処理を行うべき。
	//xPathとか使うと吉かも。
	$$("#content p").each(function(elt, index){
		var text = elt.get("text");
		var newText = "";
		var textArr = text.split("");
		textArr.each(function(t, i){
			//ここのアルゴリズムは適当。
			if( textArr[i + 1] && !t.match(list) && !textArr[i + 1].match(list) ){
				newText += t + s;
			}else
				newText += t;
		});
		elt.set("html", newText);
	});
});

ポリシーとしては今のところこんな感じです。