均等割り付け

/**
 * 均等割り付け
 *
 * IE8も対応 IE7は未対応
 *
 * 使用例
 *	<table>
 *		<tr>
 *			<th class="justifyline">会社名</th><td></td>
 *		</tr>
 *		<tr>
 *			<th class="justifyline">設立</th><td></td>
 *		</tr>
 *		<tr>
 *			<th class="justifyline">電話番号</th><td></td>
 *		</tr>
 *	</table>
 *
 * @author ao-system
 */
(function(window,document){
	var targetClass = 'justifyline';
	init();

	function init() {
		//要素と結果を集める。結果を直接適用させると、tableで徐々に幅が異なっていくため
		var allElm = document.getElementsByTagName('*');
		var resultElms = [];
		var resultHtml = [];
		var c = 0;
		for (var i = 0; i < allElm.length; i++) {
			if (allElm[i].className.indexOf(targetClass) != -1) {
				resultElms[c] = allElm[i];
				resultHtml[c] = render(allElm[i]);
				c++;
			}
		}
		//適用
		for (var i = 0; i < resultElms.length; i++) {
			resultElms[i].innerHTML = resultHtml[i];
		}
	}

	function getFontSize(elm) {
		var testDiv = document.createElement('div');
		testDiv.style.width = '1em';
		elm.appendChild(testDiv);
		var fontSize = testDiv.clientWidth;
		elm.removeChild(testDiv);
		return fontSize;
	}

	function render(elm) {
		var words = elm.innerHTML;
		if (words.length == 1) {
			elm.style.textAlign = 'center';
			return;
		}
		var origFontSize = getFontSize(elm);
		var wordsWidth = grabPixelLineSize(words,origFontSize); //文字列の幅を取得する
		elm.style.wordBreak = 'keep-all';	//親要素の禁則処理を無効にする
		var parentWidth = elm.clientWidth;
		var fontRatio = (parentWidth - wordsWidth) / (words.length - 1);
		var chars = words.slice();
		var lineText = '';
		for (var i = 0; i < chars.length - 1; i++) {
			lineText += '<span style="letter-spacing:' + fontRatio + 'px !important">' + chars[i]  + '</span>';
		}
		lineText += chars[chars.length - 1];
		return lineText;
	}

/**
 * 現在の文章の幅を測る
 *
 */
	function grabPixelLineSize(words,origFontSize) {
		var divElm = document.createElement('div');
		divElm.id = 'justifydummy';
		divElm.style.display = 'inline-block';
		divElm.style.margin = 0;
		divElm.style.padding = 0;
		divElm.style.fontSize = origFontSize + 'px';
		divElm.innerHTML = words;
		document.getElementsByTagName('body').item(0).appendChild(divElm);
		var elmWidth = document.getElementById('justifydummy').clientWidth;
		document.getElementsByTagName('body').item(0).removeChild(divElm);
		return elmWidth;
	}

})(window,document);