Autore Topic: Testo orientato verticalmente e CSS3 (Letto 11008 volte)

babbo_nachele · « **il:** 13 Gennaio 2005 12:14:24 »

Ciao a tutti.
Sto sviluppando un'applicazione web-based che prevede l'utilizzo di testo orientato orizzontalmente e verticalmente.
Dal momento che non ho aluna intenzione di utilizzare browser proprietari (non si fan nomi ma tanto han capito tutti a cosa mi riferisco

) volevo sapere come gestire un foglio di stile affinche' firefox visualizzi testo verticale (Con IE ci sono le funzioni filtro flipv() flipH() ).
E' supportata la proprieta' glyph-orientation-vertical di CSS3 in firefox?

Grazie a tutti dell'attenzione

iacchi · « **Risposta #1 il:** 13 Gennaio 2005 16:48:56 »

Intanto sposto nel forum più adatto.

klades · « **Risposta #2 il:** 13 Gennaio 2005 18:00:12 »

Citazione da: babbo_nachele

E' supportata la proprieta' glyph-orientation-vertical di CSS3 in firefox?

Non credo proprio, non è supportato neanche "writing-mode"...
Ciao, Paolo

flod · « **Risposta #3 il:** 13 Gennaio 2005 20:52:38 »

Prova a dare un'occhiata a questa pagina; nella pagina si parla di codici che funzionano solo con IE, però io riesco a visualizzarli senza problemi anche in FF

klades · « **Risposta #4 il:** 13 Gennaio 2005 22:32:05 »

Li vedi bene (anche io!) perchè quelle sono immagini, servono solo a dare una idea, ma quel codice non ti funziona se lo metti in una pagina web.
Ciao, Paolo

prometeo · « **Risposta #5 il:** 14 Gennaio 2005 00:01:00 »

Qualcuno può creare una paginetta di esempio per fami capire meglio?
Sono davvero cusrioso di vedere questa caratteristica e vedere se per caso hanno fatto qualcosa.
Ciao, Giacomo.

flod · « **Risposta #6 il:** 14 Gennaio 2005 09:37:18 »

Citazione da: klades

Li vedi bene (anche io!) perchè quelle sono immagini, servono solo a dare una idea, ma quel codice non ti funziona se lo metti in una pagina web.

Doh!

Non ci ho neppure pensato che potessero essere immagini

Sono stato ingannato da questa frase

Citazione

If the examples below are not vertical then you are not using IE.

klades · « **Risposta #7 il:** 14 Gennaio 2005 09:57:50 »

Citazione da: prometeo

Qualcuno può creare una paginetta di esempio per fami capire meglio?
Sono davvero cusrioso di vedere questa caratteristica e vedere se per caso hanno fatto qualcosa.

Un piccolo esempio può essere questo

Codice: [Seleziona]


<html>
<head>
<title>Prova</title>
<style>
.vertical {
writing-mode: tb-rl;
}
</style>
</head>
<body>
<div class="vertical">
<h1>Prova</h1>
</div></body>
</html>

Se puoi provarlo su mozilla/firefox e ie vedrai la differenza.
La proprietà glyph-orientation-vertical dovrebbe poi servire a gestire l'orientamento del testo verticale in modo da poter ottenere qualcosa tipo
P
R
O
V
A
...ma è una proprietà che non è supportata credo da nessun browser, pur essendo uno standard del css3 ( http://www.w3.org/TR/css3-text/#text-layout )
Ciao, Paolo

lucasali · « **Risposta #8 il:** 14 Gennaio 2005 10:02:55 »

Citazione da: prometeo

Qualcuno può creare una paginetta di esempio per fami capire meglio?
Sono davvero cusrioso di vedere questa caratteristica e vedere se per caso hanno fatto qualcosa.
Ciao, Giacomo.

Codice: [Seleziona]

<html><body>
<style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style>
<div class="verticaltext">Test-1</div>
</body></html>

testato:
con IE il testo è in verticale
con FF no

comunque il CSS validator non mi passa il controllo.

ciao. Luca

klades · « **Risposta #9 il:** 14 Gennaio 2005 10:26:51 »

Citazione da: lucasali

testato:
con IE il testo è in verticale
con FF no
comunque il CSS validator non mi passa il controllo.

Non te lo passa perchè "filter: flipv; fliph" non è standard.
Ma writing-mode lo è, e su Firefox/Mozilla non funziona ancora.
Ciao, Paolo

babbo_nachele · « **Risposta #10 il:** 14 Gennaio 2005 14:05:19 »

intanto grazie a tutti delle risposte, ora se permettete una domanda un po' off-topics...
Dal momento che il supporto per scrittura verticale e' momentaneamente assente...e' possibile che voi sappiate ottenere un risultato simile utilizzando javascript? (Firefox compatibile ovviamente!

)

thx