Perso nel codice di Nme
Il sito di spettacolo in lingua inglese Nme usa per titoli e articoli il Roboto, caricandolo non da Google ma dal proprio server.
Per i titoli la dimensione è 54 pixel, peso medio, mentre per il testo è 18 pixel. Mi sembrava che tempo fa ci fosse un numero con la virgola, mentre adesso c’è il numero tondo. La virgola si trova alla voce Line Height, che è impostata a 28.8 px.
Il problema della pagina è che il codice è impostato in maniera tale da disorientare un po’ lo strumento di Firefox che serve ad analizzarlo.
Cliccando su un paragrafo col pulsante destro e poi su “inspect element” viene fuori la consueta schermata a tre colonne. A sinistra c’è il codice, al centro tutte le istruzioni che riguardano lo stile, a destra i font usati.
Mentre a sinistra e a destra non c’è nessun problema, al centro mancano proprio le righe che stabiliscono il font usato e la sua dimensione. Molte righe in cui compare la parola font sono sbarrate, mentre quelle non sbarrate dicono “inherit”. Ma eredita da dove?
Andando a dare un’occhiata al codice html non è complicato trovare alla settantaquattresima riga una lunga serie di istruzioni riguardanti i font. C’è scritto un numero 18 ad una voce font-size, ma non c’è mai un “size: 54px”, né viene mai specificato un Line Height decimale. Da dove li prende questi dati?
In effetti la Line Height si imposta automaticamente sulla base della dimensione del testo. Corpo 48px = height 54px, corpo 12px = height 14px; size 18px =height... 20px!
Se qui a 18 corrisponde un 28.8 vuol dire che l’interlinea è aumentata. Ma dove c’è scritto?
In effetti 28.8px corrisponde a 1.6em. E nel codice compare la line-height del body impostata a 1.6 (ma non è specificato em).
Nell’ “Inspector” di Firefox quelle istruzioni si vedono, e risultano sbarrate.
La cosa strana è che la voce “body” compare 4 volte, di cui due per stabilire la font-family. Entrambe sbarrate. Una è inerte: togliendo i segni di spunta non cambia nulla nella pagina. L’altra (la prima) pur essendo sbarrata è attiva. Togliendo il segno di spunta a line-height, le righe della pagina si ricompattano.
Questa definizione starebbe nel file “_globals.scss”. Ma come si arriva dalla pagina a questo file?
La risposta è: non lo so.
L’ “Inspector” di Firefox permette di arrivarci direttamente e di vedere cosa c’è scritto. Ma come ci arrivi il codice è un mistero, per me.
Mi chiedo solo se tutte queste complicazioni servono effettivamente a qualcosa, e se non era possibile ottenere lo stesso effetto con qualche centinaio di righe di codice in meno.
Per i titoli la dimensione è 54 pixel, peso medio, mentre per il testo è 18 pixel. Mi sembrava che tempo fa ci fosse un numero con la virgola, mentre adesso c’è il numero tondo. La virgola si trova alla voce Line Height, che è impostata a 28.8 px.
Il problema della pagina è che il codice è impostato in maniera tale da disorientare un po’ lo strumento di Firefox che serve ad analizzarlo.
Cliccando su un paragrafo col pulsante destro e poi su “inspect element” viene fuori la consueta schermata a tre colonne. A sinistra c’è il codice, al centro tutte le istruzioni che riguardano lo stile, a destra i font usati.
Mentre a sinistra e a destra non c’è nessun problema, al centro mancano proprio le righe che stabiliscono il font usato e la sua dimensione. Molte righe in cui compare la parola font sono sbarrate, mentre quelle non sbarrate dicono “inherit”. Ma eredita da dove?
Andando a dare un’occhiata al codice html non è complicato trovare alla settantaquattresima riga una lunga serie di istruzioni riguardanti i font. C’è scritto un numero 18 ad una voce font-size, ma non c’è mai un “size: 54px”, né viene mai specificato un Line Height decimale. Da dove li prende questi dati?
In effetti la Line Height si imposta automaticamente sulla base della dimensione del testo. Corpo 48px = height 54px, corpo 12px = height 14px; size 18px =height... 20px!
Se qui a 18 corrisponde un 28.8 vuol dire che l’interlinea è aumentata. Ma dove c’è scritto?
In effetti 28.8px corrisponde a 1.6em. E nel codice compare la line-height del body impostata a 1.6 (ma non è specificato em).
Nell’ “Inspector” di Firefox quelle istruzioni si vedono, e risultano sbarrate.
La cosa strana è che la voce “body” compare 4 volte, di cui due per stabilire la font-family. Entrambe sbarrate. Una è inerte: togliendo i segni di spunta non cambia nulla nella pagina. L’altra (la prima) pur essendo sbarrata è attiva. Togliendo il segno di spunta a line-height, le righe della pagina si ricompattano.
Questa definizione starebbe nel file “_globals.scss”. Ma come si arriva dalla pagina a questo file?
La risposta è: non lo so.
L’ “Inspector” di Firefox permette di arrivarci direttamente e di vedere cosa c’è scritto. Ma come ci arrivi il codice è un mistero, per me.
Mi chiedo solo se tutte queste complicazioni servono effettivamente a qualcosa, e se non era possibile ottenere lo stesso effetto con qualche centinaio di righe di codice in meno.
Commenti
Posta un commento