Newsgroup: it.comp.www.html
Titolo: Vertical Text

Un po' di tempo fa, a seguito di una segnalazione di Rhymes su un tutorial
di projectseven ho sottoscritto il newsgroup e devo dire che è interessante
seguirlo. Ho scritto stasera il mio primo post, credo che sia interessante
e lo posto anche qui.
Saluti,
    SantaKlauss______________________________________
                       Quasi tutto è possibile, anche un caldo del genere!
---original message sent to forums.projectseven.com---
| Steve B wrote:
| > How could you add vertical text to this pages css?
| > Thanks
David Powers wrote:
| You can't. Vertical text is part of CSS3, and not yet supported by browsers.
Yes, he can just with css level 2, the only restriction is about using a monospace
font. The trick is to set some paragraphs (to spacing words) in a div larger as the font-size.
Every letter in a word should be separated by a space.
To render thing horizontally again without changing html code, just have to define
word-spacing to zero and inline display in paragraphs.
This solution, done by myself, have been tested with IE 5.5, Opera 7 and Mozilla 1.4
and works well. Hope it would help.
Greetings from Italy,
    SantaKlauss
***follows sample page***
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>Vertical text by SantaKlauss</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 2.6">
<style type="text/css">
body{
    margin: 0px;
    padding: 0px;
    font-size: 76%;
     }
div#vertical{
    width: 2em;
    border: 1px solid #000;
    text-align: center
    }
div#vertical p{
    font-family: courier,monospace;
    font-weight: bold;
    font-size: 2em
    }
</style>
</head>
<body>
<div id="vertical">
    <p >T h i s</p>
    <p>t e x t</p>
    <p>i s</p>
    <p>v e r t i c a l</p>
</div>
</body>
</html>

seguirlo. 
Eh eh ogni tanto qualcosa di buono combino :)
Bell'esempio SantaKlauss! :)
-- 
Lawrence "Rhymes" Oluyede
http://loluyede.blogspot.com
XmlDesk - 
http://tinyurl.com/fhrz
 - for Xml developers
UGIdotNET - User Group Italiano .NET - 
http://www.ugidotnet.org

Rhymes ha scritto:
| Bell'esempio SantaKlauss! :)
Grazie! Peccato che David Powers non la pensi così :-(
una cosa è dire che è impossibile, un' altra è dire che è possibile
ma non elegante... che nervi! Segue la sua risposta che non ho
capito per intero...
    SantaKlauss
____________
Yes, you can do it that way, but it's neither very elegant, nor is is
correct use of paragraph tags. The whole idea of CSS was to get away from
using techniques like blockquote to indent text. Also, it doesn't offer the
possibility of creating vertical text like that on the spine of a book. For
that, you will have to wait for CSS3 support - or use a graphic.

that, you will have to wait for CSS3 support - or use a graphic.
Traduco velocemente (spero sia corretto)
Si, puoi farlo in quel modo ma non è né elegante, né il modo corretto
di usare i tag <p>. L'idea dei CSS è quella di star alla larga
dall'usare tecniche come <blockquote> per indentare il testo. Inoltre,
non offre la possibilità di creare testo verticale come quello sul
dorso di un libro. Per far ciò, devi aspettare il supporto ai CSS3
(aggiungo io...che tanto non arriverà praticamente mai :P) - o usare
un grafico (aggiungo io...ho idea che lui pensasse a SVG)


Rhymes ha scritto:
| Traduco velocemente (spero sia corretto)
[...cut...]
Grazie Rhymes... devo dire che hai capito al volo che avevo bisogno di
una mano con l' inglese che è un po' arrugginito al momento!
Ho appena mandato la mia risposta, eccola di seguito.
Ciao e grazie!
    SantaKlauss
David Powers wrote:
| Yes, you can do it that way, but it's neither very elegant, nor is is
| correct use of paragraph tags. The whole idea of CSS was to get away from
| using techniques like blockquote to indent text. Also, it doesn't offer the
| possibility of creating vertical text like that on the spine of a book. For
| that, you will have to wait for CSS3 support - or use a graphic.
Hi David,
    surely the use of graphics at the moment is the better way. Mine was just
an attempt to play with css giving helpful infos to Steve.
You'd agree with me that css are very funny and creative.
About using multiple paragraphs for vertically spacing words, maybe you're right,
it's not so logical using html in order to aid css presentation.
So, here's my final solution. For demonstration, I' ve styled the same html
part in horizontal text form just to show how easy is re-style html with this technique.
Best Regards,
    SantaKlauss
*** follows sample page ***
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>Vertical text by SantaKlauss</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 2.6">
<style type="text/css">
body{
    margin: 0px;
    padding: 0px;
    font-size: 76%
    }
div#vertical{
    width: 2em;
    border: 1px solid #000;
    text-align: center
    }
div#vertical p, div#horizontal p{
    font-family: courier,monospace;
    font-weight: bold;
    font-size: 2em
    }
div#vertical p span{
    display: block
    }
</style>
</head>
<body>
<div id="vertical">
<p><span>T</span><span>o</span><span>&nbsp;</span><span>h</span><span>o</span><span>m</span><span>e</span></p>
</div>
<div id="horizontal">
<p><span>T</span><span>o</span><span>&nbsp;</span><span>h</span><span>o</span><span>m</span><span>e</span></p>
</div>
</body>
</html>