I read an article on the smallest "readable" font (1px wide by 5px high) but I didn't like the rainbow colors, so I created a 2x5 sub-pixel font in javascript in a classic green on black terminal style color scheme - 1st method is html5 canvas, 2nd is using plain old tables with css
Code: Select all
<html>
<head>
<style>
.cbox,tr,td {
height:1px
border-spacing:0px;
line-height:1px;
font-size:1px;
padding:0px;
margin:0px;
border:0px;
cellspacing:0px;
cellpadding:0px;
border-spacing: 0px;
border-collapse:collapse !important;
}
canvas, table{display:block}
body{background-color:black}
td {width:1px;height:1px}
</style>
<title></title>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
<script>
var glyphstiny={
'A':'0F0F0FFFFF0FF0F',
'B':'FF0F0FFF0F0FFF0',
'C':'0F0F0FF00F0F0F0',
'D':'FF0F0FF0FF0FFF0',
'E':'FFFF00FF0F00FFF',
'F':'FFFF00FF0F00F00',
'G':'0FFF00F7FF0F0F0',
'H':'F0FF0FFFFF0FF0F',
'I':'FFF0F00F00F0FFF',
'J':'FFF00F00FF0F0F0',
'K':'F0FF0FFF0F0FF0F',
'L':'F00F00F00F00FFF',
'M':'F0FFFFF0FF0FF0F',
'N':'F0FF7FFFFF7FF0F',
'O':'0F0F0FF0FF0F0F0',
'P':'FF0F0FFF0F00F00',
'Q':'0F0F0FF0FF7F0F7',
'R':'FF0F0FFF0F0FF0F',
'S':'0FFF0F0F000FFF0',
'T':'FFF0F00F00F00F0',
'U':'F0FF0FF0FF0FFFF',
'V':'F0FF0FF0F7F70F0',
'W':'F0FF0FF0FFFFF0F',
'X':'F0FF0F0F0F0FF0F',
'Y':'F0FF0F0F00F00F0',
'Z':'FFF00F0F0F00FFF',
'0':'0F0F0FF0FF0F0F0',
'1':'0F00F00F00F00F0',
'2':'0F0F0F00F0F0FFF',
'3':'FF000F0FF00FFF0',
'4':'F0FF0FFFF00F00F',
'5':'FFFF00FF000FFF0',
'6':'0F0F00FF0F0F0F0',
'7':'FFF00F0F0F00F00',
'8':'0F0F0F0F0F0F0F0',
'9':'0F0F0F0FF00F0F0',
' ':'000000000000000',
'_':'000000000000FFF',
'+':'0000F0FFF0F0000',
'-':'000000FFF000000',
'=':'000FFF000FFF000',
'>':'F000F000F0F0F00',
'<':'00F0F0F000F000F',
')':'0F000F00F00F0F0',
'(':'0F0F00F00F000F0',
'*':'FFF7F7FFF7F7FFF',
'&':'0FFF000F0F7F0F7',
'^':'0F0F0F000000000',
'$':'0FFFF00F70FFFF0',
'%':'F0F00F0F0F00F0F',
'"':'F0FF0F000000000',
'\'':'0F00F0000000000',
';':'0000F00000F0700',
':':'0000F00000F0000',
'/':'00F00F0F0F00F00',
'?':'0F0F0F00F0700F0',
'.':'0000000000F0000',
',':'0000000000F0700',
']':'FF00F00F00F0FF0',
'[':'0FF0F00F00F00FF',
'}':'F700F007F0F0F70',
'{':'07F0F0F700F007F',
'#':'F0FFFFF0FFFFF0F',
'@':'0F0F0FF7FF770F7',
'!':'0F00F00F00000F0',
'~':'F7007F000000000',
'`':'0F0007000000000',
}
var glyphsmedium={
'A':'00FF000F00F00FFFF00F00F00F00F0',
'B':'0FFF000F00F00FFF000F00F00FFF00',
'C':'00FF000F00F00F00000F00F000FF00',
'D':'0FFF000F00F00F00F00F00F00FFF00',
'E':'0FFFF00F00000FFF000F00000FFFF0',
'F':'0FFFF00F00000FFF000F00000F0000',
'G':'00FFF00F00000F0FF00F00F000FF00',
'H':'0F00F00F00F00FFFF00F00F00F00F0',
'I':'000FFF0000F00000F00000F0000FFF',
'J':'000FFF0000F00000F00F00F000FF00',
'K':'0F00F00F0F000FF0000F0F000F00F0',
'L':'0F00000F00000F00000F00000FFFF0',
'M':'0F00F00FFFF00F77F00F00F00F00F0',
'N':'0F00F00FF0F00F77F00F0FF00F00F0',
'O':'00FF000F00F00F00F00F00F000FF00',
'P':'0FFF000F00F00FFF000F00000F0000',
'Q':'00FF000F00F00F00F00F07F000FF07',
'R':'0FFF000F00F00FFF000F00F00F00F0',
'S':'00FFF00F000000FF000000F00FFF00',
'T':'0F77FF0000F00000F00000F00000F0',
'U':'0F00F00F00F00F00F00F00F000FF00',
'V':'0F00F00F00F00F00F007777000FF00',
'W':'0F00F00F00F00F77F00FFFF00F00F0',
'X':'0F00F00F00F000FF000F00F00F00F0',
'Y':'0F00F00F00F0007700007700007700',
'Z':'0FFFF00007F000FF000F70000FFFF0',
'0':'00FF000F00F07F77F70F00F000FF00',
'1':'0007F0000FF00000F00000F0000FFF',
'2':'00FF000F00F0000F0000F0F00FFFF0',
'3':'0FFF000000F000FF000000F00FFF00',
'4':'0F00F00F00F00FFFF00000F00000F0',
'5':'0FFFF00F00000FFF700000F00FFF70',
'6':'00FFF00F00000FFF000F00F000FF00',
'7':'0FFFF00F07F0007F700FF7000F7000',
'8':'07FF700F00F007FF700F00F007FF70',
'9':'07FF700F00F007FFF00000F00FFF70',
' ':'000000000000000000000000000000',
'_':'0000000000000000000000000FFFF0',
'+':'00000000FF000FFFF000FF00000000',
'-':'0000000000000FFFF0000000000000',
'=':'0000000FFFF00000000FFFF0000000',
'>':'0F00000077000000F00077000F0000',
'<':'0000F00077000F00000077000000F0',
')':'000F700007F00000F00007F0000F70',
'(':'07F0000F70000F00000F700007F000',
'*':'F0FF0F07FF70FFFFFF07FF70F0FF0F',
'&':'00FF000F00F000FF000F07F000FF0F',
'^':'0077000F00F0000000000000000000',
'$':'07FFF00F0F0000FFF0000F7F0FFFF0',
'%':'0F00F0000F0000770000F0000F00F0',
'"':'0F00F00F00F0000000000000000000',
'\'':'000000000000000000000000000000',
';':'0000000F00000000000F0000700000',
':':'0000000F00000000000F0000F70000',
'/':'0000F00007F000F0000F70000F0000',
'?':'07FFF00F00770000F00000000000F0',
'.':'0000000000000000000F0000000000',
',':'0000000000000000000F0000770000',
']':'000FF00000F00000F00000F0000FF0',
'[':'0FF0000F00000F00000F00000FF000',
'}':'0007F0000070000FFF0000700007F0',
'{':'0F7000070000FFF0000700000F7000',
'#':'0F00F07F77F70F00F07F77F70F00F0',
'@':'00FF700F00F00F77F00F777007FFF0',
'!':'0F00000F00000F00000000000F0000',
'~':'0000000F0F70F7F0F7000000000000',
'`':'0F0000077000000000000000000000',
}
var canvas,ctx,d,id,putPixel,glyphs;
function putPixelBox(x,y,r,g,b,a){
ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
ctx.fillRect(x,y,1,1); // fill in the pixel at (10,10)
}
function putPixelData(x,y,r,g,b,a){
d[0] = r;
d[1] = g;
d[2] = b;
d[3] = a;
ctx.putImageData( id, x, y );
}
function tinyPrintCanvas(s){
s=s.toUpperCase()
var i,j,k,r,g,b,dx=4,dy=4,h=5+2*dy,fw=glyphs['0'].length/15|0,w=fw*(dx+s.length);
canvas=document.createElement("canvas"); canvas.width=w; canvas.height=h;
document.body.appendChild(canvas)
ctx=canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
id=ctx.createImageData(1,1);
d = id.data;
ctx.fillRect(0,0,w,h);
for (i=0;i<s.length;i++){
for (j=0;j<5;j++){
letter=s.substr(i,1);
for (k=0;k<fw;k++){
r=glyphs[letter].substr(j*6+k*3,1);
g=glyphs[letter].substr(j*6+k*3+1,1);
b=glyphs[letter].substr(j*6+k*3+2,1);
putPixel( dx+i*fw+k, dy+j ,'0x'+r+r|0,'0x'+g+g|0,'0x'+b+b|0,199);
}
}
}
}
function tinyPrintTable(s){
s=s.toUpperCase()
var tbl,tr=[],td,img,r,g,b,i,j,k,fw=glyphs['0'].length/15|0;
tbl=document.createElement("table")
tr[0]=document.createElement("tr")
tr[1]=document.createElement("tr")
tr[2]=document.createElement("tr")
tr[3]=document.createElement("tr")
tr[4]=document.createElement("tr")
tbl.className="cbox"
for (i=0;i<s.length;i++){
for (j=0;j<5;j++){
letter=s.substr(i,1)
for (k=0;k<fw;k++){
td=document.createElement("td")
td.title=letter
td.setAttribute("bgcolor","#"+ glyphs[letter].substr(j*6+k*3,3) );
tr[j].appendChild(td)
}
}
}
for (i=0;i<5;i++)
tbl.appendChild(tr[i])
document.body.appendChild(tbl)
}
putPixel=putPixelBox
glyphs=glyphstiny;
tinyPrintCanvas("hello world")
tinyPrintTable("hello world")
</script>
It looks better when you run it than the screen shots show, the image loses quality and gets anti-aliased... but here is a (cruddy) shot anyhow.