metanohi-misc-subsites/projects/x/xtext.htm

131 lines
2.5 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Xtext</title>
<style type='text/css'>
* {
font:25px 'trebuchet ms';
position:relative;
color:#99ff00;
}
.shadow div {
position:relative;
color:#99ff00;
z-index:2;
}
.shadow div.e {
position:absolute;
top:1px;
left:1px;
color:#000;
z-index:1;
}
.outline div {
float:left;
}
.outline div div {
color:#99ff00;
z-index:2;
font-size:70px;
}
.outline div div.e {
color:#000;
font-size:80px;
position:absolute;
top:-5px;
left:-3px;
z-index:1;
}
</style>
<script type='text/javascript'>
window.onload=function() {
d=document.body
for (i=0;i<d.childNodes.length;i++) {
node=d.childNodes[i]
if (node.className) {
nspl=node.className.split(" ")
if (nspl[0]=="shadow") {
tl=nspl[1]
if (!tl) tl=""
tls=tl.split(",")
top=tls[0]
left=tls[1]
size=tls[2]
fcolor=tls[3]
scolor=tls[4]
if (!top && (left || size || fcolor || scolor))
top="_"
if (top && top!="_")
stya="top: "+top+"px"
else
stya=""
if (left)
stya+="; left:"+left+"px"
if (size) {
stya+="; font-size: "+size+"px"
styb=" style='font-size: "+size+"px"
}
else
styb=""
if (fcolor)
styb+="; color: "+fcolor
if (scolor)
stya+="; color: "+scolor
if (top*1<0)
node.style.marginTop=top.substr(1)+"px"
if (left*1<0)
node.style.marginLeft=left.substr(1)+"px"
if (stya!="") {
if (top!="_")
stya=" style='"+stya+"'"
else
stya=" style='"+stya.substr(2)+"'"
}
if (styb!="")
styb+="'"
node.innerHTML="<div class='e'"+stya+">"+node.innerHTML+"</div>"+"<div"+styb+">"+node.innerHTML+"</div>"
}
else if (nspl[0]=="outline") {
fres=""
ni=node.innerHTML
nl=ni.length
for (ib=0; ib<nl; ib+=1) {
ns=ni.substr(ib,1)
ns=ns.replace(" ","&nbsp;")
fres+="<div><div>"+ns+"</div><div class='e'>"+ns+"</div></div>"
}
node.innerHTML=fres
}
}
}
}
</script>
</head>
<body>
<div class='shadow -1,0,18'>This is a test.</div>
<div class='shadow'>This is a test.</div>
<div class='shadow 2,2,50'>This is a test.</div>
<div class='shadow 3,3,75'>This is a test.</div>
<div class='shadow 1,3,80,#8e00f8,#ab9605'>This is a test.</div>
<div class='shadow 4,4,100'>This is a test.</div>
<div class='shadow -4,-4,110,#000,#ccc'>This is a test.</div>
<div class='shadow 5,-3,120,#f0d208,#0019f0'>This is a test.</div>
<div class='outline'>This is a test.</div>
</body>
</html>