Created
June 12, 2014 10:00
-
-
Save sawapi/75431c2ffb56610e0e7e to your computer and use it in GitHub Desktop.
kerning
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
| ( function() { | |
| var data = { | |
| "（": [-0.5, 0], | |
| "）": [ 0, -0.5], | |
| "『": [-0.5, 0], | |
| "』": [ 0, -0.5], | |
| "【": [-0.5, 0], | |
| "】": [ 0, -0.5], | |
| "「": [-0.5, 0], | |
| "」": [ 0, -0.5], | |
| "、": [ 0, -0.3], | |
| "。": [ 0, -0.3], | |
| " ": [ 0, -0.6], | |
| "・": [-0.3, -0.3], | |
| "！": [-0.25, -0.1], | |
| "っ": [-0.15, -0.15], | |
| "ゃ": [-0.15, -0.15], | |
| "ゅ": [-0.15, -0.15], | |
| "ょ": [-0.15, -0.15], | |
| "ッ": [-0.15, -0.15], | |
| "ャ": [-0.15, -0.15], | |
| "ュ": [-0.15, -0.15], | |
| "ョ": [-0.15, -0.15], | |
| "ェ": [-0.15, -0.15], | |
| "ィ": [-0.15, -0.15] | |
| }; | |
| String.prototype.kerning = function() { | |
| var length = this.length, result = []; | |
| for ( var i = 0, chr; chr = this[i]; i++ ) { | |
| if ( typeof data[chr] === 'undefined' ) { | |
| result.push( chr ); | |
| continue; | |
| } | |
| if ( typeof data[chr] === 'string' ) { | |
| result.push( data[chr] ); | |
| continue; | |
| } | |
| var styles = []; | |
| if ( data[chr][0] !== 0 ) { | |
| styles.push( 'margin-left:' + data[chr][0] + 'em;' ); | |
| } | |
| if ( data[chr][1] !== 0 ) { | |
| styles.push( 'margin-right:' + data[chr][1] + 'em;' ); | |
| } | |
| if ( styles.length !== 0 ) { | |
| result.push( '<span style="display:inline-block;' + styles.join( '' ) + '">' + chr + '</span>' ); | |
| } else { | |
| result.push( chr ); | |
| } | |
| } | |
| return result.join( '' ); | |
| }; | |
| } )(); |
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| h2 { margin: 0px; padding: 0px; color: #222222; font-size: 18px; } | |
| div { font-size: 14px; color: #444444; border: 1px solid #a0a0a0; padding: 5px; } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>字詰めなし</h2> | |
| <div> | |
| JavaScript（ジャヴァスクリプト）とは、プログラミング言語のひとつである。 | |
| Javaと名前が似ているが、異なるプログラミング言語である（後述の#歴史を参照）。 | |
| オブジェクト指向のスクリプト言語であることを特徴とする。 | |
| 主にウェブブラウザに実装され、動的なウェブサイト構築や、 | |
| リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。 | |
| </div> | |
| <h2>字詰めあり</h2> | |
| <div id="kerning"> | |
| JavaScript（ジャヴァスクリプト）とは、プログラミング言語のひとつである。 | |
| Javaと名前が似ているが、異なるプログラミング言語である（後述の#歴史を参照）。 | |
| オブジェクト指向のスクリプト言語であることを特徴とする。 | |
| 主にウェブブラウザに実装され、動的なウェブサイト構築や、 | |
| リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。 | |
| </div> | |
| </body> | |
| <script src="./kerning.js"></script> | |
| <script> | |
| var element = document.getElementById( 'kerning' ); | |
| element.innerHTML = element.innerHTML.kerning(); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment