css: dimensioni in em

**gve** · 17-11-2003, 18.52.08

Mi spiegate questo codice come funziona?
[code:1:fc73222505]<html>
<head>
<title> New Document </title>
</head>
<body style="font-family: monospace">
<p style="font-family: monospace ; width: 10em ; padding: 0 ; margin: 0 ; border: 1px solid #000000">123456789ABCD</p>
</body>
</html>[/code:1:fc73222505]

Ovvero, a cosa corrisponde l'unità di misura em?
Io avevo inteso che dovrebbe essere pari alla larghezza del carattere 'm' del set di caratteri del blocco (che nel caso di monospace è uguale a quella degli altri caratteri) ma evidentemente non è così: in una cella di larghezza 10em, come potete vedere, ci stanno ben più di 10 caratteri, sia che uno usi Opera, IE o Firebird.

Qualcuno mi sa svelare l'arcano?

18-11-2003, 16.10.09

Originalmente inviato da guida

em (ems, the height of the element's font)

Stando a quel che dice la guida em dovrebbe essere un'unità di misura pari all'altezza del font.

**gve** · 19-11-2003, 01.23.19

Grazie, non sono riuscito a trovare la pagina del manuale neanche ora (avevo già cercato) ma così si spiega sia quanto ho chiesto sopra (visto che height e width di un carattere possono essere diversi) che un'altra cosa, ovvero perchè in diversi browser (che usano diversi caratteri per il monospace) il comportamento è leggermente diverso: il numero di caratteri che sta effettivamente nella cella non è lo stesso sotto Opera, firebird o IE.

Quindi non ho modo di fissare il numero di caratteri che sta in una cella (ovviamente per le famiglie monospace, per le altre non ha senso) o esiste qualche trucco? Sul manuale non ho trovato niente, ma magari come per il caso precedente sono io che sono imbranato nelle ricerche.

19-11-2003, 01.52.54

In modo univoco per ogni browser no

**gve** · 19-11-2003, 02.04.22

Allora neanche per uno stesso browser, visto che l'utente (anche se pochi credo lo facciano) può cambiare i set di caratteri predefiniti.

Come temevo. Pazienza, mi rasegnerò.

PS: mi sarebbe stato utile per un form, in cui settavo il size dei campi input in modo da fissarne la lunghezza, e le colonne delle textarea, poi li mettevo in un div che doveva fargli da cornice; per ora ho fatto una cosa temporanea sistemata ad occhio che funge abbastanza bene con tutti e tre i browser, senza però niente di garantito ovviamente. Vedrò di sistemare la cosa coi css in modo diverso, dimensionando con essi anche gli input e la textarea. Solo che fissare la lunghezza visibile dei campi mi sarebbe piaciuto, ma farò di necessità virtù.

19-11-2003, 09.22.07

Puoi settare il numero massimo di caratteri per un campo input solo se questo e' type=text.

In questo modo:

[code:1:c32d4e29c9]<input type="text" maxlength="10" />
[/code:1:c32d4e29c9]

La proprieta' size di input, inoltre, riceve come paramretro propio il numero massimo di caratteri, quindi

[code:1:c32d4e29c9]<input type="text" maxlength="10" size="10" />
[/code:1:c32d4e29c9]
Crea una casella lunga 10 caratteri e che non permettera' l'inserimento di piu' di 10 caratteri.

Le textarea sono diverse, la larghezza e' specificata dal parametro cols, che indica il numero di colonne. Non e' quasi mai uguale al numero di caratteri e sinceramente non ho ancora capito a cosa serve

P.S.: io scrivo in xhtml, se non ti piace basta rimuovere le virgolette e il / prima della fine e diventa html

**gve** · 19-11-2003, 13.24.04

Anche vado di XHTL, anche se di fatto il xml non lo uso; non lo conosco minimamente, avevo provato a guardare ma mi pare complicato, però visto che costa poco far modo che i documenti siano compatibili con esso tanto vale farli così: in un futuro si sa mai, e se avrò qualche modifica in meno da fare ... tanto di guadagnto.

Comuque è quello che avevo fatto usare size e cols, il problema è stato quando ho voluto dimensionare il box esterno in modo che facesse da cornice al form (= avere la stessa spaziatura da entrambi i lati del form): avevo pensato che usare gli em andasse bene, ma per le ragioni esposte da numerone la cosa non è possibile farla in modo univoco preservando il valore impostato per size; anche se in qualche modo si riesce ad aggiustare, non è garanzia che tutti lo vedano giusto. Se non sono stato chiaro, puoi guardare qua, per ora è ancora la versione aggiustata: http://ospiti.gve.altervista.org/

P.S.: nelle textarea le cols corrispondono ai caratteri, se questi sono di famiglie 'monospace'

19-11-2003, 18.49.43

Non ho capito se quello che ti interessa e' settare un limite massimo di caratteri per le caselle o anche fare in modo che siano lunghe "x caratteri"

Se il problema e' che vuoi lasciare un po' di margine tra i bordi della box e le caselle, prova a usare la proprieta' padding.

OT: le box e IE
Il problema con le box e' che IE legge le proprieta' margin come INTERNE alle tabelle e ai filedset. Ti faccio un esempio:

voglio creare un riquardo largo il 60% dello schermo con dentro una casella input distante dai bordi del riquadro stesso di circa il 2%. Per comodita' uso fieldset.

In teoria farei:

fieldset { width: 60%; margin-left: 20%; margin-right: 20%; padding-let: 2%; padding-right:2%;}

su tutti i browser si vede benissimo, perche' capiscono:
un fieldset largo il 60% della pagina, distante dai bordi 20% sia a destra che a sinistra, distante dal suo contenuto 2% a destra e a sinistra,
ma su IE no.
Questo perche' IE mette ALL'INTERNO del fieldset anche i margini, e ti fara' un filedset larghissimo.

Un tempo si poteva risolvere con il box-hack, un sistema che sfruttava un bug di IE nel leggere i css e gli impediva di leggere tutto quello che veniva dopo voice-family: "\"}\""; . Purtroppo in IE 6 hanno fissato questo bug ma non il resto. IE 6 continua a leggere male la proprieta' margin.

a questo punto chiedetevi perche'.
Perche' Microsoft ha fissato un bug che NOTORIAMENTE permetteva di vedere bene i siti anche con IE?
Perche' Microsoft non rispetta MAI gli standard della w3c e IE legge sempre male qualcosa?
Perche' Microsoft si inventa dei nuovi tag che solo IE puo' leggere?

La risposta (secondo me) e' "Monopolio di Internet": Microsoft vuole che il web diventi navigabile con sicurezza solo a chi ha IE e spinge i webmaster di tutto il mondo a scrivere pagine che solo IE possa mostrare adeguatamente.

In conclusione (e scusate lo sfogo ma ci ho lavorato 5 notti fino alle 2:30!!!!) ti consiglierei di usare solo le percentuali e di impostare qualcosa come:

div.box { margin-left: 20%; margin-right: 20% }
input.box { 100%; }

lasciando che sia il browser a "strizzare" la box, senza darle delle width. Dovrebbe funzionare, ma non ne sono sicuro al 100%.

**gve** · 19-11-2003, 19.32.08

A me interessavano entrambe le cose, ma il problema grafico era legato alla seconda: fare in modo che le caselle di testo fossero lunghe 'x caratteri', però come suggerisci penso ci rinuncerò.

Pensavo di fare più o meno com dici tu, solo che mi sa che il campo form e gli input hanno un comportamento tipo le liste, ovvero se ne sbattono del containing-block (in realtà anceh ciò è browser dipendente, per quanto riguarda le liste). Farò un po' di prove, poi vi farò sapere.

Interessante invece la tua informazione: credo ne terrò conto,magari con quello riesco ad aggiustare meglio altre cose: c'è una tabella nella mia home il contenuto delle cui celle che si vede a livello o sfasato a seconda del browser, credo dipenda da quanto mi dici.
Probabilmente si potrebbe risolvere con un po' di ridondanza: ovvero quando ho bisogno di settare il width (o height) di un box imposto il margin e il padding del box a 0, quindi lo circondo con un box esterno che ha lui tali parametri (il padding è necessario, l'altro dipende da se serve) ma non la dimensione.

Es. per un box centrato di larghezza fissa uguale suun qualsiasi browser:

css:[code:1:20f6c8879d]body { text-align: center }
.ext { padding: 1em ; border: 1px solid #000000 }
.box { padding: 0 ; margin: 0 ; width: 30% }[/code:1:20f6c8879d]
html:[code:1:20f6c8879d]<html><head></head>
<body>

<div class="ext">
<div class="box"></div>
</div>

</body>[/code:1:20f6c8879d]

Non lo ho provato, ma credo funga.

**gve** · 19-11-2003, 20.36.20

In realtà il metodo che ho descritto sopra non funge (inoltre padding risulta inutile anche per risolvere il problema mio iniziale, quindi mi sa che tornerò alla soluzione di rinunciare a settare i caratteri visibili nelle caselle).

Così però si, ho un po' ribaltato i temini della soluzione (in realtà questa soluzione è di un mio amico):

css:[code:1:5b2cd73331]body { text-align: center }

.ext { padding: 0 ; width: 30% ; border: 1px solid #000000 }
/* l'importante è il padding a 0 e la width */

.box { padding: 0 ; margin: 1em }
/* in realtà basta usare uno dei due, l'altro diventa un parametro superfluo */[/code:1:5b2cd73331]
html:[code:1:5b2cd73331]<html><head></head>
<body>

<div class="ext">
<div class="box"></div>
</div>

</body>[/code:1:5b2cd73331]

Così il comportamento di tutti diventa tipo quello di IE, ma almeno si ha uniformità.

Discussione: css: dimensioni in em

LinkBack

Strumenti discussione

Display

Regole di scrittura