Entry
How can I display text at an angle?
How can I display text at an angle?
Feb 13th, 2000 10:54
Martin Honnen,
How can I display text at an angle?
The easiest for all browsers is to write a table with one row and one
column for each character:
<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
function displayTextDiagonal (text, down) {
var html = '';
html += '<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">';
if (down) {
for (var r = 0; r < text.length; r++) {
html += '<TR>';
for (var c = 0; c < r; c++)
html += '<TD><\/TD>';
html += '<TD>' + (text.charAt(r) == ' ' ? ' ' :
text.charAt(r)) + '<\/TD>';
for (var c = r + 1; c < text.length; c++)
html += '<TD><\/TD>';
html += '<\/TR>';
}
}
else {
for (var r = text.length - 1; r >= 0; r--) {
html += '<TR>';
for (var c = 0; c < r; c++)
html += '<TD><\/TD>';
html += '<TD>' + (text.charAt(r) == ' ' ? ' ' :
text.charAt(r)) + '<\/TD>';
for (var c = r + 1; c < text.length; c++)
html += '<TD><\/TD>';
html += '<\/TR>';
}
}
html += '<\/TABLE>';
document.write(html);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
displayTextDiagonal('All for Kibology', true);
</SCRIPT>
<SCRIPT>
displayTextDiagonal('Scriptology for all', false);
</SCRIPT>
</BODY>
</HTML>
With version4+ browsers you can use css relative positioning to produce
diagonal text display:
<HTML>
<HEAD>
<STYLE>
.positioned { position: relative; }
</STYLE>
<SCRIPT>
var id = 0;
function displayTextDiagonal (text, down, deg, lsp) {
deg = deg || 45;
deg = Math.PI / 180 * deg;
lsp = lsp || 10;
dy = lsp * Math.tan(deg);
var html = '';
html += '<DIV ID="td' + id + '"' + ' CLASS="positioned"' + '>';
if (down) {
for (var r = 0; r < text.length; r++) {
html += '<SPAN ID="td' + id + r
+ '" CLASS="positioned" STYLE="left: '
+ (r * lsp) + 'px; top: ' + (r * dy) + 'px;">';
html += text.charAt(r);
html += '</SPAN>';
}
}
else {
for (var r = 0; r < text.length; r++) {
html += '<SPAN ID="td' + id + r
+ '" CLASS="positioned" STYLE="left: '
+ (r * lsp) + 'px; top: '
+ ((text.length - r) * dy) + 'px;">';
html += text.charAt(r);
html += '</SPAN>';
}
}
html += '<\/DIV>';
id++;
document.write(html);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
displayTextDiagonal('All for Kibology', true, 10);
</SCRIPT>
<SCRIPT>
displayTextDiagonal('All for Kibology', true, 80, 2);
</SCRIPT>
<SCRIPT>
displayTextDiagonal('Kibology for all', false, 80, 2);
</SCRIPT>
</BODY>
</HTML>
Note that the above code is prone to fail with NN4 as it uses inline
styles which though officially supported cause NN to loose content. For
instance with 4.7 on Win98 the first text shows up while the second and
third get lost.
I will try to put an NN4 solution in a separate answer. It will be
restricted to absolute positioning though.
