Righello in pixel

Misurare in pixel, con esattezza

È l'unico strumento del sito che non richiede calibrazione, e vale la pena capire perché. Tutte le altre schede convertono i pixel in unità fisiche, e quella conversione dipende dal conoscere la densità reale del tuo schermo. Un righello in pixel salta la conversione: misura pixel in pixel, quindi la risposta è esatta su qualsiasi schermo, a qualsiasi densità, senza nulla da preparare.

I righelli sui bordi superiore e sinistro sono graduati ogni 10 px con una cifra ogni 100, e una selezione prolunga linee guida in entrambe le canaline, così puoi leggere una distanza direttamente sulla scala.

Pixel CSS, pixel del dispositivo, e perché contano entrambi

Un pixel CSS è un'unità di impaginazione, non un punto fisico. Su uno schermo standard i due coincidono. Su qualsiasi schermo ad alta densità un singolo pixel CSS viene disegnato usando più pixel del dispositivo: quattro a 2× e nove a 3×. Il rapporto che li collega compare sotto la superficie, per lo schermo su cui stai leggendo.

Per il lavoro front-end la conseguenza è semplice: si impagina in pixel CSS e si esportano le immagini alla dimensione in pixel del dispositivo. Un'icona che occupa 24 pixel CSS richiede 48 px di dati reali per restare nitida su uno schermo 2×, ed è tutta la ragione per cui esistono srcset e i file @2x. Qui le due cifre stanno una accanto all'altra, così quella moltiplicazione non la fai a mente.

Le percentuali dell'area visibile servono a uno scopo affine. Quando converti un progetto a larghezza fissa in CSS adattivo, sapere che un elemento occupa il 20 % della larghezza è più utile subito che sapere che misura 240 px, perché si traduce direttamente in vw e vh.

A cosa serve davvero

Quasi sempre alla stessa manciata di compiti, e sono tutti confronti più che misure assolute:

• Controllare che le spaziature siano coerenti. I design system si reggono su una scala, di solito multipli di 4 o di 8. Uno spazio di 14 px in un layout costruito sugli ottavi è un errore, e si vede molto prima con un righello sopra che leggendo il codice.
• Confrontare una realizzazione con il suo progetto. Misura lo stesso elemento in entrambi. Un titolo che dovrebbe stare a 32 px dal bordo e sta a 28 è proprio il tipo di deriva che si accumula in silenzio lungo una pagina.
• Dimensionare una risorsa prima di esportarla. Misura lo spazio che occuperà, poi esporta a quella dimensione moltiplicata per il rapporto pixel a cui punti.
• Chiudere una discussione su uno screenshot. Lascia una guida su un bordo e la questione se due cose siano allineate smette di essere un'opinione.

Che cosa un righello in pixel non può fare

Può misurare solo dentro la propria pagina. Una pagina web non vede altre finestre, altre schede o la tua scrivania. Quell'isolamento è un confine di sicurezza deliberato e importante, non un limite da aggirare. Misurare l'interfaccia di un'applicazione nativa, o qualunque cosa fuori dal browser, richiede un programma desktop con i permessi giusti.

Anche lo zoom del browser merita una spiegazione. Non ingrandisce la pagina finita come farebbe una lente: cambia quanto vale un pixel CSS, e la pagina viene reimpaginata alla nuova dimensione. Al 125 % un pixel CSS viene disegnato con 1,25 pixel del dispositivo, quindi questa superficie continua a riportare onesti pixel CSS mentre tutto appare fisicamente più grande. È il comportamento corretto, perché il pixel CSS è l'unità in cui si scrivono gli stili.

Resta la tastiera, che è la parte che sfugge. Seleziona la superficie e le frecce ridimensionano la selezione di un pixel alla volta, o di dieci tenendo premuto Maiusc. Il mouse serve ad avvicinarsi; le frecce servono ad arrivare a una cifra esatta, e non scappano all'ultimo momento come fa un trackpad.

La trappola degli screenshot

Uno screenshot preso su uno schermo 2× contiene il doppio dei pixel del layout che mostra. Un pulsante da 200 px CSS esce come 400 px nel file. È la fonte di confusione più comune quando due persone confrontano misure: una legge pixel CSS nel proprio browser, l'altra legge pixel dell'immagine in un editor, ed entrambe hanno ragione senza saperlo.

Tre abitudini evitano la discussione. Dichiara sempre l'unità quando dai una cifra, "200 px CSS" invece di "200 px". Annota il rapporto pixel della macchina su cui lo screenshot è stato preso, perché è quello il fattore di conversione. E quando il confronto conta davvero, misura entrambi i lati nello stesso punto: questa superficie per la pagina viva e i righelli del tuo editor per il file, dividendo questi ultimi per il rapporto pixel.

Lo stesso ragionamento spiega perché un'immagine esportata alla dimensione CSS appare sfocata su uno schermo ad alta densità. Non è sfocata: le mancano semplicemente i dati, stirata su quattro volte i punti che contiene, ed è esattamente il motivo per cui conviene esportare al doppio invece che ingrandire dopo.