A Purely JavaScript font
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript Image Font</title>
<meta name="Generator" content="EditPlus"><!-- Gotta love this editor! It's the best! Utterly customizable and lightweight, both. -->
<meta name="Author" content="Jared Daniel J. Smith">
<meta name="Keywords" content="javascript, dhtml, font, image, graphic, icon, fonts, dom, mozilla, ie, internet explorer, browser, client">
<meta name="Description" content="Pure JavaScript font solution: DHTML rendering text, using a font composed of images.">
<style>
IMG {
vertical-align: top;
}
.tinyimg {
height: 1px;
width: 1px;
}
</style>
<script language=JavaScript>
/////////////////////////////////////////////////////////
// A fair amount of these techniques come from the
// very useful site javascript.faqts.com. Thanks to
// the many programmers who make that a very friendly
// resource. - jared smith at dctkc com, March 19, 2004
/////////////////////////////////////////////////////////
// used during ctrlV and shiftIns 'paste' text
var inserted = false;
// chars outside the normal range of 32 through 126
var oddchars = new Array(186, 187, 188, 189, 190, 191, 192, 219, 220, 221, 222);
//////////////////////////////////////////
// add a single letter using DOM methods
function addLetter(unicode, divID, height) {
src = unicode+'.gif';
// create the img tag
itag = document.createElement("IMG");
itag.src = src;
// get the original img height/width
h = parseInt(itag.height);
w = parseInt(itag.width);
// find out their ratio
r = (w/h);
// make the ratio match the new height
height = parseInt(height);
width = height * r;
// q,p,y,g,;,, descending chars = more height
switch (unicode) {
case 40: case 41: case 44: case 59: case 106:
case 112: case 113: case 121: case 103:
width = width * 1.2;
height =
(height>110) ? height + (h/3) :
(height>100&&height<111) ? height + (h/2.3) :
(height>90&&height<101) ? height + (h/3.6) :
(height>80&&height<91) ? height + (h/5) :
(height>70&&height<81) ? height + (h/6.1) :
(height>60&&height<71) ? height + (h/7) :
(height>50&&height<61) ? height + (h/8.1) :
(height>40&&height<51) ? height + (h/9.6) :
(height>30&&height<41) ? height + (h/11) :
(height>20&&height<31) ? height + (h/13) :
(height>10&&height<21) ? height + (h/16) :
(height>5&&height<11) ? height + (h/23) : 5;
}
// assign height and width
itag.height=height;
itag.width=width;
//itag.style.vertical-align='top';
window.document.getElementById(divID).appendChild(itag);
}
//////////////////////////////////////////
// add a block of text, one letter at a time
function addTextBlock(txt, divID, height) {
for (i=0; i<txt.length; i++) {
t = txt.substr(i,1);
addLetter(t.charCodeAt(0), divID, height);
}
}
//////////////////////////////////////////
// if we used ctrlV or shift-Ins to paste text
function checkInsert(val, divID, height) {
if (inserted) {
clearText(divID);
addTextBlock(val, divID, height);
inserted=false;
}
}
//////////////////////////////////////////
// main function to be called for text editing
function editText(me, event, divID, height) {
keyCode = event.keyCode;
if (keyCode>=32&&keyCode<=126||keyCode==8) {
if (trapEditActions(me, event, keyCode, divID, height)) {
addLetter(handleShift(event, keyCode), divID, height);
}
}
for (i=0; i<oddchars.length; i++) {
if (keyCode==oddchars[i]) {
addLetter(handleShift(event, keyCode), divID, height);
}
}
window.status=keyCode+':'+String.fromCharCode(keyCode)+'shift: '+event.shiftKey;
}
//////////////////////////////////////////
// ie and moz don't agree on how to get cursor position in textfield
function getCursorPos(textElement) {
if (textElement.createTextRange) {
//save off the current value to restore it later,
var sOldText = textElement.value;
//create a range object and save off it's text
var objRange = document.selection.createRange();
var sOldRange = objRange.text;
//set this string to a small string that will not normally be encountered
var sWeirdString = '#%~';
//insert the weirdstring where the cursor is at
objRange.text = sOldRange + sWeirdString;
objRange.moveStart('character', (0 - sOldRange.length - sWeirdString.length));
//save off the new string with the weirdstring in it
var sNewText = textElement.value;
//set the actual text value back to how it was
objRange.text = sOldRange;
//look through the new string we saved off and find the location of
//the weirdstring that was inserted and return that value
for (i=0; i <= sNewText.length; i++) {
var sTemp = sNewText.substring(i, i + sWeirdString.length);
if (sTemp == sWeirdString) {
var cursorPos = (i - sOldRange.length);
return cursorPos;
}
}
} else if (textElement.setSelectionRange) {
var len = textElement.selectionEnd;
}
return len;
}
//////////////////////////////////////////
// handle or skip cursor movement and deletion keys
function trapEditActions(me, event, keyCode, divID, height) {
// start, end, length attributes of the selection text
if (window.getSelection) {
start = parseInt(me.selectionStart);
end = parseInt(me.selectionEnd);
len = end - start;
txt = me.value.substr(start,len);
} else {
txt = document.selection.createRange().text;
if (txt.length==0) {
start = getCursorPos(me);
end = start;
len = 0;
} else {
start = me.value.indexOf(txt);
len = txt.length;
end = start + len;
}
}
// handle deletion keys first
if (keyCode==46||keyCode==8) { // backspace or delete
if (keyCode==46) { // delete
if (len==0) { // delete one char to the right
newtext = me.value.substr(0,start) + me.value.substr(start+1);
} else { // delete selection
newtext = me.value.replace(new RegExp(txt, 'g'),'');
}
} else { // backspace
if (len==0) { // delete one char to the left
newtext = me.value.substr(0,start-1) + me.value.substr(start);
} else { // delete selection
newtext = me.value.replace(new RegExp(txt, 'g'),'');
}
}
clearText(divID);
addTextBlock(newtext, divID, height);
return false;
}
// turn 'inserted' on if CtrlV; and skip the v
if ((event.ctrlKey&&keyCode==86)||(event.shiftKey&&keyCode==45)) {
inserted = true;
return false;
}
// skip ctrlC
if (event.ctrlKey&&keyCode==67) {
return false;
}
// skip all other ctrl keys
if (event.ctrlKey) {
return false;
}
// skip all arrow and cursor movement keys
switch (keyCode) {
case 33: case 34: case 35: case 36: case 37:
case 38: case 39: case 40: case 45:
return false;
}
// handle any other key possibilities
if (len>0) { // we have selected some text...
if (keyCode>=32||keyCode<=126) {
newtext = me.value.replace(new RegExp(txt, 'g'), String.fromCharCode(keyCode));
}
clearText(divID);
addTextBlock(newtext, divID, height);
return false;
} else if (end!=me.value.length) { // cursor is not at end...
if (keyCode>=32||keyCode<=126) {
newtext = me.value.substr(0,start) + String.fromCharCode(keyCode) + me.value.substr(start);
}
clearText(divID);
addTextBlock(newtext, divID, height);
return false;
}
// if we get here, we did NOT get an editing action.
return true;
}
//////////////////////////////////////////
// replace the display ID with ''
function clearText(divID) {
window.document.getElementById(divID).innerHTML='';
}
//////////////////////////////////////////
// most keys have double meanings depending on shift
function handleShift(event, k) {
if (!event.shiftKey) { //unshifted
if (k>=65&&k<=90) { //lowercase letters
k = k + 32;
}
switch (k) { // outside the normal range, unshifted
case 186: return 59; case 187: return 61; case 188: return 44;
case 189: return 45; case 190: return 46; case 191: return 47;
case 192: return 96; case 219: return 91; case 220: return 92;
case 221: return 93; case 222: return 39; default: return k;
}
} else { // number keys &tc, shifted
switch (k) {
case 48: return 41; case 49: return 33; case 50: return 64;
case 51: return 35; case 52: return 36; case 53: return 37;
case 54: return 94; case 55: return 38; case 56: return 42;
case 57: return 40; case 186: return 58; case 187: return 43;
case 188: return 60; case 189: return 95; case 190: return 62;
case 191: return 63; case 192: return 126; case 219: return 123;
case 220: return 124; case 221: return 125; case 222: return 34;
default: return k;
}
}
}
</script>
</head>
<body onLoad="document.getElementById('entryspot').focus();" bgcolor="#eeeeee">
<h3>JavaScript Image Font Demo</h3>
<div id="viewit" style="height:100;"><br></div>
<br><BR><BR><BR>
<form name="fontdemo">
Font Height (px):
<input type="text" name="fontheight" value="75" size="2">
<br>
Enter text: <input type="text" size="50" id="entryspot"
onKeyDown="editText(this, event, 'viewit', document.forms.fontdemo.fontheight.value);"
onKeyUp="checkInsert(this.value, 'viewit', document.forms.fontdemo.fontheight.value);">
<br>
<textarea id="textspot" cols=50 rows=10></textarea>
<br>
<input type="button"
onClick="addTextBlock(document.forms.fontdemo.textspot.value, 'viewit', document.forms.fontdemo.fontheight.value);"
value="render this textbox">
<input type="button" onClick="clearText('viewit');" value="clear display text">
</form>
<br>
<hr>
<h3>A Purely JavaScript font</h3>
This script comes with 95 images, each named after
the unicode value for the letter it contains. For example,
the letter 'a' is stored as a tiny GIF image called
'97.gif'. The images are each about 1.5k, all together
about 130K. They are preloaded into this document
so JavaScript can render them quickly. This program
was written as part of the solution to match screen
fonts with SATO printer fonts in a WYSIWYG fashion.
The images are actual scans from a SATO CL408e barcode
printer.
<h3>Cross Browser DHTML</h3>
No, this will not work for browsers under about v.6,
but it renders well in the current IE and Mozilla both.
I used the DOM method for creating the images in your
document; this is the fastest way to render. InnerHTML
is used only once; to clear the display.
<h3>Scaleable</h3>
Change the font height above, and you can see that the
font scales well, for being a kludgy scan of an
admittedly simple barcode font. Set the fontsize to
1000, you will see that it loads the image just as fast
as if it were 10 pixels high. Still, the speed is not
useful for text more than about 50 characters at a time,
since DELETE and BACKSPACE actions redraw all text.
Perhaps there is a more elegant way to handle these.
<h3>Enjoy!</h3>
Now have fun with that barcode printer. This code is
a stub for all kinds of applications. With some optimization,
it could be used for online layout and design of more
complex text than this simple font. I think all that's
left is kerning.
<br><br>
<!-- preloaded images so there is no pause during display -->
<img src="100.gif" class=""> <img src="101.gif" class=""> <img src="102.gif" class="">
<img src="103.gif" class=""> <img src="104.gif" class=""> <img src="105.gif" class="">
<img src="106.gif" class=""> <img src="107.gif" class=""> <img src="108.gif" class="">
<img src="109.gif" class=""> <img src="110.gif" class=""> <img src="110.gif" class="">
<img src="112.gif" class=""> <img src="113.gif" class=""> <img src="114.gif" class="">
<img src="115.gif" class=""> <img src="116.gif" class=""> <img src="117.gif" class="">
<img src="118.gif" class=""> <img src="119.gif" class=""> <img src="120.gif" class="">
<img src="121.gif" class=""> <img src="122.gif" class=""> <img src="123.gif" class="">
<img src="124.gif" class=""> <img src="125.gif" class=""> <img src="126.gif" class="">
<img src="32.gif" class=""> <img src="33.gif" class=""> <img src="34.gif" class="">
<img src="35.gif" class=""> <img src="36.gif" class=""> <img src="37.gif" class="">
<img src="38.gif" class=""> <img src="39.gif" class=""> <img src="40.gif" class="">
<img src="41.gif" class=""> <img src="42.gif" class=""> <img src="43.gif" class="">
<img src="44.gif" class=""> <img src="45.gif" class=""> <img src="46.gif" class="">
<img src="47.gif" class=""> <img src="48.gif" class=""> <img src="49.gif" class="">
<img src="50.gif" class=""> <img src="51.gif" class=""> <img src="52.gif" class="">
<img src="53.gif" class=""> <img src="54.gif" class=""> <img src="55.gif" class="">
<img src="56.gif" class=""> <img src="57.gif" class=""> <img src="58.gif" class="">
<img src="59.gif" class=""> <img src="60.gif" class=""> <img src="61.gif" class="">
<img src="62.gif" class=""> <img src="63.gif" class=""> <img src="64.gif" class="">
<img src="65.gif" class=""> <img src="66.gif" class=""> <img src="67.gif" class="">
<img src="68.gif" class=""> <img src="69.gif" class=""> <img src="70.gif" class="">
<img src="71.gif" class=""> <img src="72.gif" class=""> <img src="73.gif" class="">
<img src="74.gif" class=""> <img src="75.gif" class=""> <img src="76.gif" class="">
<img src="77.gif" class=""> <img src="78.gif" class=""> <img src="79.gif" class="">
<img src="80.gif" class=""> <img src="81.gif" class=""> <img src="82.gif" class="">
<img src="83.gif" class=""> <img src="84.gif" class=""> <img src="85.gif" class="">
<img src="86.gif" class=""> <img src="87.gif" class=""> <img src="88.gif" class="">
<img src="89.gif" class=""> <img src="90.gif" class=""> <img src="91.gif" class="">
<img src="92.gif" class=""> <img src="93.gif" class=""> <img src="94.gif" class="">
<img src="95.gif" class=""> <img src="96.gif" class=""> <img src="97.gif" class="">
<img src="98.gif" class=""> <img src="99.gif" class="">
</body>
</html>
javascriptfont.zip( 62 k)Related examples in the same category