grandezza <h1> in proporzione

[Fello]

Ciao a tutti, ho questa situzione:
ho un tag <h1> generato automaticamente, contenuto all'interno di un div (supponiamo di 500px).
Vorrei che l'h1 avesse sempre la dimensione massima del font che gli consenta di occupare la larghezza del div senza andare a capo.

Quindi, il mio h1 è "Ciao" il font dovrebbe essere di una certa grandezza, se invece il mio <h1> è "ciao oggi è proprio una bella giornata quindi vado a fare una passeggiata" il font naturalmente deve essere più piccolo in modo tale da non farlo andare a capo.

spero di essermi spiegato!!

[pierofix]

Mannaggia, questo mi sa che è compito troppo duro per i css.

Per fare una mia considerazione personale - scusate, non riesco a trattenermi :rollo: - ma sei sicuro di quello che vuoi fare? Mi riferisco al fatto che un layout dovrebbe essere coerente in tutte le pagine di un sito: se tu cambi la dimensione del titolo di pagina ogni volta che cambi pagina, mi sa che la cosa cozza un pochetto.

Che dici?

[Fello]

è vero, però mi è venuto in mente questa cosa e per curiosità volevo chiedere se qualcosa di simile si poteca ottenere, magari provandola vedo che stona e la abbandono!

Quindi piero dici che non è possibile?

[pierofix]

Bè, non ne ho la certezza, ma:

1. non ho mai visto una roba simile all'opera;
2. non mi pare di avere mai incontrato una proprietà css che sia in grado di farlo;
3. provando a ragionarci su, il tutto è basato sul riconoscimento del numero di caratteri e sullo spazio da essi occupato: il css non è in grado di fare certi "ragionamenti";

Per tutti questi motivi, a mio avviso (ma solo mio), non credo si possa. Forse dovresti coinvolgere javascript, ma così ad occhio occorrono molte molte righe di codice.

[Fello]

no, in questo caso penso che lascerò perdere, io ho chiesto perchè mi ero fatto questo ragionamento:
il mio div è largo 500px
il mio <h1> inline deve essere largo il 100% del livello
la grandezza del font quindi doveva variare

va beh ci ho provato!!

[pierofix]

Originariamente inviato da Fello
il mio div è largo 500px

Sono una considerazione generale. Occhio al punto 3.4 delle WCAG 1:

- www.w3.org/TR/WCAG10/#gl-structure-presentation

[Mich_]

Con una "sfida" cosi` non mi date la possibilita` di ritirarmi ...

Chiaramente serve JS. CSS da solo non puo` farlo.

Supponiamo di avere il titolo in un <h1> e supponendo che tale <h1> sia l'unico (o il primo) della pagina (se non lo e` il codice cambia di poco).

Quindi:
// punta all'oggetto che contiene il titolo.
var tit = document.getElementsByTagName('h1')[0];

// legge la larghezza del titolo (non funziona in tutti i browser)
var wt = tit.style.width;

// legge la larghezza del documento
var wd = document.style.width; // oppure document.getElementByTagName('body').style.width

var tit = document.getElementsByTagName('h1')[0];
var wd = document.style.width;
while(1) {                     // loop indefinito
  var wt = tit.style.width;    // largh. titolo
  if(wt/wd > 1) {              //   troppo largo
    tit.style.fontSize *= .8;  //     diminuisce font
  } else if(wt/wd < .7) {      //   troppo stretto
    tit.style.fontSize *= 1.2; //     aumenta font
  } else break;                //   dimens. ok
}

I valori .8, 1.2, .7 ecc sono messi un po' a caso: andrebbero valutati a script funzionante.


Edit: uno script cosi` non rispetta l'accessibilita`.

[Fello]

Grazie Mich_ lo proverò e ti farò sapere!
Sei stato molto gentile