Come si trova la dimensione del carattere più grande che non romperà un determinato testo?

Question

Sto cercando di utilizzare CSS ( in @media print ) e JavaScript per stampare un documento di una pagina con un determinato pezzo di testo reso il più grande possibile pur rimanendo all'interno di una data larghezza. La lunghezza del testo non è nota in anticipo, quindi semplicemente utilizzare un carattere a larghezza fissa non è un'opzione.

In altre parole, sto cercando un ridimensionamento corretto, in modo che, ad esempio, "IIIII". verrebbe fuori con una dimensione del carattere molto più grande di "WWWWW" perché " I " è molto più magro di "W" in un carattere a larghezza variabile.

Il più vicino che sono stato in grado di ottenere con questo è usare JavaScript per provare varie dimensioni dei caratteri fino a quando clientWidth è abbastanza piccolo. Funziona abbastanza bene per i supporti dello schermo, ma quando si passa ai supporti di stampa , c'è qualche garanzia che i 90 DPI che sembro ottenere sul mio sistema (cioè, metto i margini a 0,5 in entrambi i lati e per un testo ridimensionato in modo che si adatti perfettamente a quello, ottengo circa 675 per clientWidth ) sarà lo stesso in qualsiasi altro luogo? In che modo un browser decide quale DPI utilizzare per la conversione da misurazioni in pixel? Esiste un modo per accedere a queste informazioni tramite JavaScript?

Mi piacerebbe se questa fosse solo una funzione CSS3 ( font-size: max-for-width (7.5in) ) ma se lo è, non sono stato in grado di trovarlo .

Answer 1

Ecco un codice che ho finito per usare, nel caso qualcuno lo trovasse utile. Tutto quello che devi fare è rendere il DIV esterno della dimensione desiderata in pollici.

function make_big(id) // must be an inline element inside a block-level element
{
    var e = document.getElementById(id);
    e.style.whiteSpace = 'nowrap';
    e.style.textAlign = 'center';
    var max = e.parentNode.scrollWidth - 4; // a little padding
    e.style.fontSize = (max / 4) + 'px'; // make a guess, then we'll use the resulting ratio
    e.style.fontSize = (max / (e.scrollWidth / parseFloat(e.style.fontSize))) + 'px';
    e.style.display = 'block'; // so centering takes effect
}

Answer 2

La proprietà di dimensione del carattere CSS accetta unità di lunghezza che includono misure assolute in pollici o centimetri:

  

Le unità di lunghezza assoluta dipendono fortemente dal mezzo di uscita e   quindi sono meno utili delle unità relative. Le seguenti unità assolute   sono disponibili:

     

  
• in (pollici; 1in = 2,54 cm)
  
• cm (centimetri; 1 cm = 10mm)
  
• mm (millimetri)
  
• pt (punti; 1pt = 1 / 72in)
  
• pc (picas; 1pc = 12pt)
  

Dato che non sai ancora quanti caratteri contiene il tuo testo, potresti dover utilizzare una combinazione di javascript e CSS per impostare dinamicamente la proprietà della dimensione del carattere correttamente. Ad esempio, prendi la lunghezza della stringa in caratteri e dividi 8.5 (supponendo che ti aspetti carta in formato lettera USA) per il numero di caratteri e che ti dia la dimensione in pollici per impostare la dimensione del carattere per quel pezzo di testo. Ho testato la dimensione del carattere con misurazioni assolute in Firefox, Safari e IE6, quindi dovrebbe essere abbastanza portatile. Spero che sia d'aiuto.

MODIFICA : potrebbe essere necessario anche giocare con impostazioni come la proprietà di spaziatura delle lettere e sperimentare il tipo di carattere che usi, poiché l'impostazione della dimensione del carattere non è in realtà la larghezza delle lettere, che sarà diversa in base alla spaziatura delle lettere e al carattere, proporzionale alla lunghezza. Oh, e l'uso di un carattere monospace aiuta;)

Answer 3

Non conosco un modo per farlo in CSS. Penso che la tua scommessa migliore sarebbe usare Javascript:

1. Metti il ??testo in un div
2. Ottieni le dimensioni del div
3. Riduci il testo, se necessario
4. Torna al passaggio 2 fino a quando il testo non è sufficientemente piccolo

Ecco un codice di esempio per rilevare la dimensione del div .