Created
December 4, 2009 17:07
-
-
Save nojimage/249164 to your computer and use it in GitHub Desktop.
jquery.justify.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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