Skip to content

Instantly share code, notes, and snippets.

@kuu

kuu/ideographicSpaceDemo

Created January 23, 2013 08:12
Show Gist options
  • Save kuu/4603039 to your computer and use it in GitHub Desktop.
Save kuu/4603039 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ideographicSpaceDemo
<!DOCTYPE html>
<html>
<head>
<meta charcode="utf-8">
<title>How HTML Canvas treats the ideographic space (U+3000) in its measureText and fillText methods.</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
var canvas = document.getElementsByTagName('canvas')[0];
var span = document.getElementsByTagName('span')[0];
var context = canvas.getContext('2d');
var iSp = '\u3000';
var str = 'a' + iSp + 'b' + iSp + 'c';
context.font = '12px Osaka';
context.textBaseline = 'top';
console.log('Span:', span.offsetWidth);
console.log('Canvas:', context.measureText(str).width);
context.fillText(str, 0, 0, 320);
}, false);
</script>
</head>
<body>
<div>
<span style="padding: 0px; font-size: 12px; font-family: Osaka; display: inline">a b c<span>
</div>
<canvas width="320" height="160"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment