Specifica la larghezza in * caratteri *

108

Quando si utilizza un carattere a larghezza fissa , vorrei specificare la larghezza di un elemento HTML in caratteri .

L'unità "em" dovrebbe essere la larghezza del carattere M, quindi dovrei essere in grado di usarla per specificare una larghezza. Questo è un esempio:

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

Il risultato non è quello che volevo poiché la riga del browser si interrompe dopo la colonna 15, non 10:

1 3 5 7 9 1 3 5
7 9 1

(Risultato in Firefox e Chromium, entrambi in Ubuntu.)

L'articolo di Wikipedia dice che una "em" non è sempre la larghezza di una M, quindi sembra decisamente che l'unità "em" non possa essere considerata attendibile per questo.

css font-size

— Martin Vilcans
fonte

Credo che "en" sia anche una larghezza legale; è la larghezza di una cifra in tipografia. Questo potrebbe funzionare meglio per voi.

— Pete Wilson

La proprietà 'em' utilizza la dimensione del carattere o l' altezza del carattere, non la larghezza delle lettere. @Pete: non lo è, vedere Valori CSS e unità di livello modulo 3 .

— animuson

A meno che tu non stia utilizzando un carattere a larghezza fissa, caratteri diversi hanno larghezze diverse. Pertanto è funzionalmente impossibile impostare una larghezza in termini di numero di caratteri visualizzati.

— Emily

possibile duplicato di Come impostare la larghezza di <div> per adattare un numero costante di lettere in un carattere a spaziatura fissa?

— Martin Vilcans

"Questa domanda richiede ancora 4 voti da parte di altri utenti per essere chiusa" - Ehi, è la mia domanda! Fammi chiudere!

— Martin Vilcans

Risposte:

1em è l'altezza di una M, piuttosto che la larghezza. Lo stesso vale per ex, che è l'altezza di una x. Più in generale, queste sono le altezze delle lettere maiuscole e minuscole.

La larghezza è una questione completamente diversa ...

Cambia il tuo esempio sopra in

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

e noterai che la larghezza e l'altezza della campata sono diverse. Per una dimensione del carattere di 20 px su Chrome, l'intervallo è 12 x 22 px, dove 20 px è l'altezza del carattere e 2 px per l'altezza della linea.

Ora poiché em ed ex non servono qui, una possibile strategia per una soluzione solo CSS sarebbe quella di

Crea un elemento contenente solo un & nbsp;
Lascia che si autosize da solo
Posiziona il tuo div all'interno di e
Rendilo 10 volte più grande dell'elemento circostante.

Tuttavia non sono riuscito a codificarlo. Dubito anche che sia davvero possibile.

La stessa logica potrebbe comunque essere implementata in Javascript. Sto usando l'onnipresente jQuery qui:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

Il +1 in (w * 10 + 1) serve per gestire i problemi di arrotondamento.

— Gerd Riesselmann
fonte

Speravo in una soluzione CSS pura, che è possibile solo se ti capita di conoscere il rapporto tra l'altezza e la larghezza di un carattere (vedi stackoverflow.com/questions/1255281/… ). Accetto questa come la risposta in quanto sembra essere una soluzione robusta.

— Martin Vilcans

1em non è l'altezza di una M secondo le risposte qui graphicdesign.stackexchange.com/questions/4035/… Il "|" il carattere dovrebbe essere più vicino a 1em.

— Sogartar

Sogartar, per chiarimento: in tipografia 1 em è infatti la larghezza (così come l'altezza em) di un carattere a larghezza fissa. Tuttavia, questa è "tipografia vera e propria" e abbiamo molte persone in giro per la notte che creano file di font che non aderiscono alle regole tipografiche, specialmente nel caso dei font web. Il punto del mio commento qui non è (semplicemente) sfacciato burbero. Il mio punto è: prova, prova, prova. (E poi prova ancora un po '.)

— Parapluie

217

`ch` unità

L'unità che stai cercando è ch. Secondo i documenti MDN :

ch: Rappresenta la larghezza, o più precisamente la misura di anticipo, del glifo "0" (zero, il carattere Unicode U + 0030) nell'elemento font.

È supportato nelle versioni correnti dei principali browser ( caniuse ).

Esempio

pre {
    width: 80ch; /* classic terminal width for code sections */
}

— transistor09
fonte

C'è anche lo spazio delle cifre , che è esattamente "uguale alla larghezza di una cifra" come descritto nell'articolo di Wikipedia sullo spazio (punteggiatura) . Il suo valore Unicode è U + 2007 e può essere inserito in HTML usando  o  . È funzionalmente equivalente chall'unità di CSS, ma sebbene non sia ampiamente supportato, può essere utilizzato come soluzione alternativa in HTML (brutto trucco, ma dovrebbe funzionare).

— waldyrious

In realtà, secondo questo problema di chrome, Chrome lo supporta dalla v27, quindi in questo momento le ultime versioni di tutti i principali browser (IE, Chrome e Firefox) supportano l'unità ch :)

— waldyrious

Si dovrebbe notare che la dimensione del carattere è la dimensione del glifo "0" nel font dell'elemento. Se vi aspettate i caratteri più grandi come 'm' o 'w' si potrebbe prendere in considerazione l'espansione di conseguenza o averlo espandersi in base alle esigenze (ad esempio stackoverflow.com/questions/7168727/... )

— user420667

Sì, nessun problema con i caratteri a spaziatura fissa.

— Willege

IE11 lo supporta in modo sbagliato. stackoverflow.com/questions/17825638/...

— aleha

Specifica la larghezza in * caratteri *

ch unità

Esempio

`ch` unità