Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jquery.justify.js
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Justify</title>
<script type="text/javascript" src="js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.justify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.justify').justify();
$('.justify-table th').justify();
});
</script>
<style type="text/css">
dl {
width: 640px;
}
dt {
width: 200px;
margin: 0;
padding: 0;
float: left;
clear: left;
}
dd {
width: 440px;
margin: 0;
padding: 0;
float: left;
}
</style>
</head>
<body>
<h1>jQuery Justify</h1>
<dl>
<dt class="justify">Title 1</dt>
<dd>text. text. text. text. text. text. text. text. text. text. text. text. </dd>
<dt class="justify">Title .</dt>
<dd>text. text. text. text. text. text. text. text. text. text. text. text. </dd>
<dt class="justify">Title 2</dt>
<dd>text. text. text. text. text. text. text. text. text. text. text. text. </dd>
<dt class="justify" style="font-weight: bold">Title s</dt>
<dd>text. text. text. text. text. text. text. text. text. text. text. text. </dd>
<dt class="justify">タイトル3</dt>
<dd>text. text. text. text. text. text. text. text. text. text. text. text. </dd>
<dt class="justify">表題</dt>
<dd>text. text. text. text. text. text. text. text. text. text. text. text. </dd>
<dt class="justify"></dt>
<dd>text. text. text. text. text. text. text. text. text. text. text. text. </dd>
</dl>
<div style="clear: both;"></div>
<table border="1" class="justify-table">
<tr>
<th>会社名</th>
<td>Example Inc</td>
</tr>
<tr>
<th>所在地</th>
<td>佐賀県佐賀市鍋島区蓮池町1-1</td>
</tr>
<tr>
<th>代表電話番号</th>
<td>123-456-7890</td>
</tr>
<tr>
<th>代表取締役</th>
<td>山田太郎</td>
</tr>
</table>
</body>
</html>
/**
* jQuery justify
*
* Copyright 2009, nojimage (http://php-tips.com/)
*
* Licensed under The MIT License
* Redistributions of files must retain the above copyright notice.
*
* @filesource
* @version 1.1
* @author nojimage <nojimage at gmail.com>
* @copyright 2009 nojimage
* @license http://www.opensource.org/licenses/mit-license.php The MIT License
* @link http://php-tips.com/
* @modifiedby nojimage <nojimage at gmail.com>
*
*/
(function($) {
/**
* letter-spacingの計算
*/
var calcLetterSpacing = function(element, width){
var letterSpacing = 0;
// elementを複製
var copy = $(element).clone();
copy.hide();
$(element).before(copy);
// letter-spacing 0の状態で幅を取得
copy.css({letterSpacing: 0, float: 'left', width: 'auto'});
if (jQuery.browser.msie && jQuery.browser.version >= 8) {
copy.css({display: 'table-cell'});
}
var innerWidth = copy.innerWidth();
// 文字数
var textLength = jQuery.trim(copy.text()).length;
// 文字数からletter-spacingを算出
letterSpacing = (width - innerWidth) / (textLength - 1);
copy.remove();
letterSpacing = Math.floor(letterSpacing);
return letterSpacing;
}
/**
* console.log wrapper
*/
var log = function(msg){
if (typeof console != 'undefined') {
console.log(msg);
}
};
jQuery.fn.justify = function(){
// 最大幅の取得
var maxWidth = 0;
this.each(function(){
if (maxWidth < $(this).innerWidth()) {
maxWidth = $(this).innerWidth();
}
});
// letter-spacingの計算
this.each(function(){
var letterSpacing = 0;
if (jQuery.trim($(this).text()).length < 2) {
return;
}
letterSpacing = calcLetterSpacing(this, maxWidth);
if ($.browser.msie && $.browser.version < 8) {
// 文字列をtrim
$(this).text(jQuery.trim($(this).text()));
} else {
// 末尾の文字のletter-spaceを除去
var text = $(this).text();
$(this).text(text.slice(0, text.length - 1));
var lastText = $('<span>').text(text.slice(text.length - 1));
$(this).append(lastText);
$(lastText).css({letterSpacing: 0, display: 'inline', padding: 0});
}
$(this).css({letterSpacing: letterSpacing + 'px'});
});
};
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment