Demonstrating how JavaScript can be used to replace text with images when CSS @font-face is not enabled

This web page is a concise tutorial (following the by-example pedagogy) showing how to use JavaScript to enhance CSS font facilities.

For example: The word “􌥈􌥖􌥘􌥧􌥼􌥻” means “here” in Swedish sign language (“swl” in ISO-639-3), whereas the word “􌤼􌥃􌤵􌤶􌤟􌥳” means “april”.

If you use a visual user agent (web browser) which is not CSS3 @font-face compliant (or where this functionality is disabled) and the swl_sans.ttf font is not installed on your computer, you will be asked whether you want to replace parts of this text with a rasterized picture of it. Feel free to read the source code of this page to find the technical details behind this functionality. This page also links to one JavaScript file and two very small CSS files (1 and 2). If you need support for very old browsers, you may also be interested in this older version of the JavaScript file.

dims.wide.offsetWidth + dims.wide.clientWidth - dims.narrow.offsetWidth - dims.narrow.clientWidth = width difference:
.

Code written by Saašha Metsärantala saasha@acc.umu.se (2011) and updated on Saturday, 2021-03-13