Newsgroup: it.comp.www.html
Titolo: Testo giustificato

Ciao a tutti,
esiste in html un metodo per scrivere del testo giustificato? Il mio 
problema e' che devo applicare questo "stile" a delle righe singole, 
mentre mi funziona solo su blocchi di testo che occupano piu' righe.
Mi spiego meglio, io devo fare:
Soluzioni
informatiche
Consulenze
Sistemi per la
stampa digitale
e vorrei che tutte le righe occupassero lo stesso spazio. Un po' come
S o l u z i o n i
i n f o r matiche
Co n s u l e n za
S istemi  per  la
stampa di g itale
Spero di essermi spiegato.
C'e' un modo per fare questo senza dover utilizzare immagini?
Grazie
Mauro

Innuendo ha scritto:
| Ciao a tutti,
| esiste in html un metodo per scrivere del testo giustificato? Il mio
| problema e' che devo applicare questo "stile" a delle righe singole,
| mentre mi funziona solo su blocchi di testo che occupano piu' righe.
| Mi spiego meglio, io devo fare:
|
| Soluzioni
| informatiche
| Consulenze
| Sistemi per la
| stampa digitale
|
| e vorrei che tutte le righe occupassero lo stesso spazio. Un po' come
|
| S o l u z i o n i
| i n f o r matiche
| Co n s u l e n za
| S istemi  per  la
| stampa di g itale
|
| Spero di essermi spiegato.C'e' un modo per fare questo senza dover utilizzare immagini?
| Grazie
| Mauro
Ciao Mauro,
    avevo un po' di tempo e così eccomi qui. Come avrai già sperimentato l' attributo
text-align, pur separando ciascuna lettera da uno spazio, non ha effetto, come se una singola
lettera non fosse riconosciuta come parola.
L' unica soluzione che ho trovato è:
- usare un font monospace e dimensionare tutto con gli em
- giocare un po' con il letter-spacing (sempre in em) di modo che ciascuna riga sia, tra
caratteri e spazi, più o meno della stessa misura in em (non serve la calcolatrice, basta fare
un po' di prove).
Ecco la soluzione in un file html completo. In questa soluzione è da notare come l' uso degli em
sia fondamentale e di notevole vantaggio sugli altri tipi di dimensionamento degli elementi.
Per come è stato pensata infatti, ti basta cambiare l' attributo font-size del tag body per
avere una specie di "zoom" di tutto quanto, e far si che ci stia tutto comunque.
Per capire ti basta modificare il font-size del body a 10px per esempio e ricaricare la pagina.
Un consiglio: se  vuoi il banner molto più piccolo, ti conviene scurire il colore del font per
aumentarne la leggibilità. La soluzione è stata testata con IE 5.5, Opera 7.0 e Mozilla 1.4.
Saluti,
    SantaKlauss
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>Justified Banner 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{
    background: #C8D4FF;
    font-size: 20pt;  /* punto chiave del dimensionamento in em*/
    text-align: center /*per centrare orizzontalmente in IE*/
    }
div#banner{
    width: 21em;
    margin: 1em auto; /*per centrare negli altri browsers*/
    background: #fff;
    border: 1px solid #000;
    padding: 0.5em
    }
div#banner p{
    width: 100%;
    line-height: 1.1em;
    margin: 0.2em 0;
    padding: 0;
    color: #0074D0;
    background-color: #f93;
    font-family: monaco,monospace;
    font-size: 1em;
    text-align: center
    }
</style>
</head>
<body>
<div id="banner">
        <p style="letter-spacing:1.6em">Soluzioni</p>
        <p style="letter-spacing:1.1em">Informatiche</p>
        <p style="letter-spacing:1.4em">Consulenza</p>
        <p style="letter-spacing: .8em">Sistemi per la</p>
        <p style="letter-spacing: .7em">Stampa Digitale</p>
</div>
</body>
</html>

Un ritocco all' html, cosě e' decisamente meglio.
Ho usato il curier new come font e il box model hack di tantek.
Saluti,
    SantaKlauss
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>Justified Banner 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{
    background: #C8D4FF;
    font-size: 20px;
    text-align: center
    }
div#banner{
    width: 16em;
    margin: 1em auto;
    background: #fff;
    border: 0.1em outset #eee;
    padding: 0.5em;
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 14.9em
    }
div#banner p{
    width: 100%;
    line-height: 1.1em;
    margin: 0.1em 0;
    padding: 0;
    color: #0074D0;
    background-color: #f93;
    font-family: "courier new",monaco,monospace;
    font-size: 1em;
    font-weight: bold;
    text-align: center
    }
</style>
</head>
<body>
<div id="banner">
        <p style="letter-spacing: 1.15em">Soluzioni</p>
        <p style="margin-top: -0.1em;letter-spacing: 0.65em">Informatiche</p>
        <p style="letter-spacing: 0.95em">Consulenza</p>
        <p style="letter-spacing: 0.45em">Sistemi per la</p>
        <p style="margin-top: -0.1em;letter-spacing: 0.4em">Stampa Digitale</p>
</div>
</body>
</html>

     SantaKlauss
Che dire ???
*GRAZIE* !!!
ciao
Mauro