Adattare dimensione caratteri di una stringa

[natasha]

Buongiorno a tutti,
ho a disposizione un certo spazio della pagina (diciamo 200px) in cui far comparire una stringa generata dinamicamente.
Ora, vorrei inserire questa stringa in un elemento span variando dinamicamente l'attributo font-size, in maniera che più la stringa è lunga, più riduco la dimensione del carattere, sì da farlo rimanere sempre nei 200px assegnati.
Qualcuno ha idea della formula matematica da utilizzare?

[Mich_]

Con i CSS non si puo` fare (sicuramente non con i CSS2, e credo che non sara` possibile neppure con i CSS3).
Per fare quello devi usare dell'"intelligenza", che non e` disponibile con i CSS, ma che si puo` realizzare con JS.

Presupponendo che vuoi che la stringa stia solo su una riga, supponendo quindi line-height==height;
in pratica puoi farti la domanda:
il blocco

(o <hX> o quello che e`) che contiene il testo ha dell'overflow (== e` piu` largo del suo contenitore)? In tal caso riduco il carattere.

E` comunque un argomento spinoso, dato che i browser hanno un limite minimo per la dimensione dei caratteri e sotto a tale limite non puoi andare (il carattere viene forzato piu` grande di tale limite).

Sposto in JS.

[natasha]

A dire l'onesta verità pensavo di usare codice server-side, PHP nello specifico

A me interessa (se esiste) la relazione matematica: dato uno spazio di X px, se ho una stringa lunga Y caratteri, a quanti Z px devo impostare il font-size perchè gli Y caratteri vadano tutti in X px?

MOLTO OVVIAMENTE, non uso un font monospaced, ma la classica famiglia "Arial, Helvetica, sans-serif", per cui va bene (se esiste) una relazione di massima.

[Mich_]

Chiaramente la cosa si puo` risolvere solo a grandi linee: infatti nei caratteri proporzionali i caratteri non hanno uguale dimensione.

Dopodiche` si possono fare delle congetture e delle misurazioni statistiche, per cui in tot pixel ci stanno circa tot caratteri.
Puoi anche impostare uno studio (su base statistica) in base al carattere, e al n.di caratteri, ma credo che fai piu` presto a risolvere con una serie di osservazioni empiriche.

Ad esempio ecco un modo di procedere che puoi applicare:
1. ti prepari una serie di stringhe, del tipo di quelle che vuoi inserire;
2. ti prepari una serie di blocchi uguali (i tuoi 200px, ad esempio);
3. metti le tue stringhe nei blocchi e vedi quali ci stanno;
4. cambi dimensione del carattere e rifai la prova.

Con questo sistema nel giro di mezz'ora o un'ora riesci ad avere una statistica sufficiente per i tuoi scopi, e forse riesci a ricavarne un algoritmo che puoi applicare.

[br1]

Originariamente inviato da natasha
A dire l'onesta verità pensavo di usare codice server-side, PHP nello specifico

A me interessa (se esiste) la relazione matematica: dato uno spazio di X px, se ho una stringa lunga Y caratteri, a quanti Z px devo impostare il font-size perchè gli Y caratteri vadano tutti in X px?

MOLTO OVVIAMENTE, non uso un font monospaced, ma la classica famiglia "Arial, Helvetica, sans-serif", per cui va bene (se esiste) una relazione di massima.

Se lo volevi PHP non capisco perche' hai postato qui... :master:

Scordati la relazione matematica... ma per i curiosi ci ho provato un pochino senza perfezionare o pensare ad altri browser che non siano il mio IE

<script>
function vai() {
	t = document.getElementById("inserisci").value;
	n = document.getElementById("nascosto");
	var s = 80; // font size iniziale
	n.style.width = "1px";
	n.innerHTML = t;
	n.style.fontSize = ""+s+"px";
	p = parseInt(n.offsetWidth);
	while (p>200&&s>0) {
		s--;
		n.style.width = "1px";
		n.style.fontSize = ""+s+"px";
		p = parseInt(n.offsetWidth);
	}
	v = document.getElementById("visibile");
	v.innerHTML = t;
	v.style.fontSize = ""+s+"px";
}
</script>
 
....

  <input type="text" id="inserisci" size="100"><input type="button" value="vai!" onclick="vai()">
  <hr>
  <div id="visibile" style="width:200px;border:1px solid red;white-space: nowrap;"></div>

  <span id="nascosto" style="overflow:visible;white-space: nowrap;visibility:hidden;"></span>

ciao