Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
kerning
( 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( '' );
};
} )();
<!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