Javascripts - Vertical Text (e.g Copyrights etc.) - Neils Resource WebJavascripts - Vertical Text (e.g Copyrights etc.) - Neils Resource WebVertical Text - Javascript - Web Dev. - Neils Resource Web

Contract Menu | Expand Menu

Summary of Content
Javascript LogoA property that I came across that struck me as being very useful, however I've yet to find out where. It allows the placing of text vertically left or right of a page or section using the DIV element.

With IE5.5 came the introduction of a new CSS property writing-mode with a default value of lr-tb which stands for left-right top-bottom (normal mode for Western language). The other possible value is tb-rl which stands for top-bottom right-left. In this mode Western/Latin glyphs are turned to the right by 90 degrees so you write downwards. The method is encapsulated in a div section:
<DIV STYLE="writing-mode: tb-rl;">Property Text - Left-Side</DIV>
This example shows on the left below this table.
Using the fliph and flipv filters you can also write upwards as the following example shows:
<DIV STYLE="writing-mode: tb-rl; filter: flipv() fliph();">Property Text - Right Side</DIV>
This example shows an the bottom right (below this table).

Using this property with a bit more CSS and a bit of javascript, control of positioning is much better.......
Header Section
<style type="text/css"> .verticaltext{ open statement
font: bold 11px Arial; font weight and size
color: navy; font colour
position: absolute; position static
right: 3px; distance from the right
top: 120px; distance from the top
width: 15px; width of text block
writing-mode: tb-rl; (t)op to (b)ottom - (r)ight to (l)eft
} </style> close statement
Body Section

<script type="text/javascript">
var myverticaltext='<div class="verticaltext">This page copyright © 2003-2005

<a href="http://www.macpherson-neil.co.uk">Neil MacPherson.</a></div>'

var bodycache=document.body
if (bodycache && bodycache.currentStyle && bodycache.currentStyle.writingMode)
document.write(myverticaltext)

</script>
 

This example is shown at the top right (of this table)

Property Text -Left Side
Property Text-Right Side

Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL)

Top of the PageTop of the PageA double mouse click anywhere on the page will take you back to the top (except when over hyperlinks)

Last Update: 19/01/2008 - Javascripts - Vertical Text (e.g Copyrights etc.) - Neils Resource Web

html 4.01 strict css 2.1 javascript 1.2