Scientific and tech docs need a page with Y-axis upwards for layouts, charts etc mostly using lines and text, unlike standard web pages where the axis is upside-down. Commercial software use complex methods for an upright page and this snippet uses simple technique as demonstrated in the code below.
Important:
Tested and used in IE.
All elements are to be with style.filter:flipv
Textarea will have its caret unseen.
Clipping of DIV shall be avoided.
(Any clue on what is happening with the caret and clip is welcome)
----------
<HTML xmlns:v ="urn:schemas-microsoft-com:vml"><HEAD><STYLE>
v\:* {BEHAVIOR:url(#default#VML);position:absolute}
div{position:absolute;filter:flipv}
body{margin:0}
</style>
<script>
function upup(){
cnv.style.overflow='scroll'
ww=cnv.scrollWidth
hh=cnv.scrollHeight
cnv.style.overflow='hidden'
cnv.style.width=ww
cnv.style.height=hh
window.scrollTo(0,hh)}
function mov(){
h=cnv.offsetHeight
x=document.body.scrollLeft+window.event.x-2
y=h-document.body.scrollTop-window.event.y+2
window.status=x+','+y}
function pts(x,y,w,h){
var ele=cnv.appendChild(document.createElement('div'))
ele.style.left=x
ele.style.top=y
ele.style.width=w
ele.style.height=h
ele.style.background=clr
upup()}
function htx(x,y,tx){
var ele=cnv.appendChild(document.createElement('div'))
ele.style.left=x
ele.style.top=y
ele.innerText=tx
upup()}
function vtx(x,y,tx){
var ele=cnv.appendChild(document.createElement('div'))
ele.style.left=x
ele.style.top=y
ele.style.filter='progidXImageTransform.Microsoft.BasicImage(rotation=3) flipv()'
ele.innerText=tx
upup()}
function lin(x1,y1,x2,y2){
var ele=cnv.appendChild(document.createElement('v:line'))
ele.from=x1+","+y1
ele.to=x2+","+y2
ele.strokeColor=clr
ele.strokeWeight=stw
upup()}
</script>
</head>
<body onload=upup()>
<div id=cnv onmousemove=mov()
style="width:20;height:20;background:#eeeeee;cursor:crosshair">
<div style="left:190;top:240;width:20;height:20;background:red"></div>
<div style="left:212;top:240">20x20 square centered at 200,250</div>
<div style="left:1180;top:1180;width:20;height:20;background:yellow"></div>
<div>This page provides for Cartesian world with origin 0,0 at the<br>
LHS bottom, needed for several scientific and technical documents.<br>
The coordinates are tracked in the status bar.<br>
This page is 1200x1200 as defined by the yellow square; with this<br>
technique we can as well have a 'cartesian window' within a standaed page.</div>
<div style="left:400;top:300;color:red"><u>CAUTION:</u><br>
All elements shall have style.filter:flipv<br>
Textarea will hasve its caret 'elsewhere'<br>
Do not use style.clip:rect(0,x,y,0)<br>
Call upup after dynamically adding elements</div>
</div>
</body>
<script>
var clr,stw,ele
clr='blue'
pts(290,140,20,20)
htx(312,140,'20x20 square centered at 300,150')
clr='black'
pts(90,140,20,20)
vtx(90,162,'20x20 square centered at 100,150')
clr='#ffff00'
stw=2
lin(100,150,200,250)
lin(200,250,300,150)
lin(300,150,100,150)
</script>
</html>
Credits:u jayakodi
Home 
Latest images 
Useless
