Proprietà logiche

Un pattern dell'interfaccia utente molto comune è un'etichetta di testo con un'icona incorporata di supporto.

L'icona si trova a sinistra del testo, con un piccolo spazio tra le due, fornita da margin-right sull'icona. Ma c'è un problema, perché funziona solo se la direzione del testo è da sinistra a destra. Se la direzione del testo cambiasse da destra a sinistra, che è il modo in cui vengono lette lingue come l'arabo, l'icona verrà posizionata sopra il testo.

Come ne tenga conto in CSS? Le proprietà logiche consentono di risolvere queste situazioni. Tra gli altri vantaggi, offre un supporto senza costi e automatico per l'internazionalizzazione. Ti aiutano a creare un front-end più resiliente e inclusivo.

Terminologia

Le proprietà fisiche dell'area in alto, a destra, in basso e a sinistra si riferiscono alle dimensioni fisiche dell'area visibile. Puoi immaginarli come una rosa dei venti su una mappa. Le proprietà logiche, invece, fanno riferimento ai bordi di un riquadro in relazione al flusso di contenuti. Pertanto, possono cambiare se la direzione del testo o la modalità di scrittura cambiano. Si tratta di un grande cambiamento rispetto agli stili direzionali, e ci offre molta più flessibilità per lo stile delle interfacce.

Blocca flusso

Il flusso a blocchi è la direzione in cui vengono posizionati i blocchi di contenuti. Ad esempio, se ci sono due paragrafi, il flusso a blocchi è il punto in cui verrà inserito il secondo paragrafo. In un documento in inglese, il flusso a blocchi va dall'alto verso il basso. Pensa a ciò nel contesto dei paragrafi di testo che si susseguono, dall'alto verso il basso.

Tre blocchi, elementi div, con una freccia rivolta verso il basso, indicati come "blocco di flusso"

Flusso in linea

Il flusso in linea è il flusso di testo in una frase. In un documento in inglese, il flusso in linea è da sinistra a destra, Se vuoi cambiare la lingua del documento della pagina web impostandola sull'arabo (<html lang="ar">), il flusso in linea sarà da destra a sinistra.

Tre parole, &quot;vende conchiglie&quot;, con una freccia da sinistra a destra, etichettata &quot;flusso in linea&quot;

Il testo scorre nella direzione determinata dalla modalità di scrittura del documento. Puoi modificare la direzione del layout del testo con la proprietà writing-mode. Questa impostazione può essere applicata all'intero documento o a singoli elementi.

Relativo al flusso

Storicamente in CSS, siamo stati in grado di applicare solo proprietà come il margine rispetto alla direzione dei loro lati. Ad esempio, margin-top viene applicato alla parte superiore fisica dell'elemento. Con le proprietà logiche, margin-top diventa margin-block-start. Ciò significa che, a prescindere dalla lingua e dalla direzione del testo, Il flusso di blocco ha regole per i margini appropriate.

Un diagramma che mostra tutte le diverse dimensioni di una scatola e il punto di inizio e di fine di ogni sezione di dimensionamento

Taglie

Per evitare che un elemento superi una certa larghezza o altezza, scrivi una regola come questa:

.my-element {
  max-width: 150px;
  max-height: 100px;
}

Gli equivalenti relativi al flusso sono max-inline-size e max-block-size. Puoi anche utilizzare min-block-size e min-inline-size anziché min-height e min-width.

Con le proprietà logiche, la regola per la larghezza e l'altezza massima avrà il seguente aspetto:

.my-element {
  max-inline-size: 150px;
  max-block-size: 100px;
}

Inizio e fine

Invece di utilizzare direzioni come in alto, a destra, in basso e a sinistra, utilizza inizio e fine. Questo fornisce block-start, inline-end, block-end e inline-start. che ti consentono di applicare proprietà CSS che rispondono alle modifiche della modalità di scrittura.

Ad esempio, per allineare il testo a destra, potresti utilizzare questo CSS:

p {
  text-align: right;
}

Se il tuo obiettivo non è allinearti al diritto fisico, ma piuttosto all'inizio della direzione di lettura, non è utile. Con i valori logici, ci sono valori start e end più utili che corrispondono alla direzione del testo. La regola di allineamento del testo ora ha il seguente aspetto:

p {
  text-align: end;
}

Spaziatura e posizionamento

Proprietà logiche per margin, padding e inset rendono più semplice ed efficiente il posizionamento degli elementi e la determinazione in che modo interagiscono tra loro nelle varie modalità di scrittura. Le proprietà relative a margine e spaziatura interna sono comunque mappature dirette alle direzioni, ma la differenza fondamentale è che quando una modalità di scrittura cambia, la modalità di scrittura cambia insieme.

.my-element {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-left: 2em;
  position: relative;
  top: 0.2em;
}

Questo aggiunge un po' di spazio interno verticale con padding e lo spinge da sinistra con margin. La proprietà top la sposta anche verso il basso. Con le proprietà logiche equivalenti, avrebbe invece questo aspetto:

.my-element {
  padding-block-start: 2em;
  padding-block-end: 2em;
  margin-inline-start: 2em;
  position: relative;
  inset-block-start: 0.2em;
}

Questa operazione aggiunge parte dello spazio interno in linea con padding e ne spinge in uscita dall'inizio in linea con margin. La proprietà inset-block lo sposta verso l'interno dall'inizio del blocco.

La proprietà inset-block non è l'unica opzione abbreviata con proprietà logiche. Questa regola può essere ulteriormente ridotta utilizzando versioni abbreviate delle proprietà di margine e spaziatura interna.

.my-element {
  padding-block: 2em;
  margin-inline: 2em 0;
  position: relative;
  inset-block: 0.2em 0;
}

Bordi

L'aggiunta di border e border-radius può essere effettuata anche con le proprietà logiche. Per aggiungere un bordo in basso e a destra, con un raggio a destra, puoi scrivere una regola come la seguente:

.my-element {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  border-bottom-right-radius: 1em;
}

In alternativa, potresti utilizzare proprietà logiche come questa:

.my-element {
  border-block-end: 1px solid red;
  border-inline-end: 1px solid red;
  border-end-end-radius: 1em;
}

end-end in border-end-end-radius è la fine del blocco e la fine in linea.

Unità

Le proprietà logiche portano due nuove unità: vi e vb. Un'unità vi corrisponde all'1% delle dimensioni dell'area visibile nella direzione in linea. La proprietà non logica equivalente è vw. L'unità vb è l'1% dell'area visibile nella direzione del blocco. La proprietà non logica equivalente è vh.

Queste unità saranno sempre mappate alla direzione di lettura. Ad esempio, se vuoi che un elemento occupi l'80% dello spazio in linea disponibile di un'area visibile, l'unità vi modificherà automaticamente la dimensione dall'alto verso il basso se la modalità di scrittura è verticale.

Utilizzare le proprietà logiche in modo pragmatico

Le proprietà logiche e le modalità di scrittura non sono destinate solo all'internazionalizzazione. Puoi utilizzarle per creare un'interfaccia utente più versatile.

Se hai un grafico con etichette sugli assi X e Y, potresti volere che il testo sull'etichetta Y si legga verticalmente.

Poiché l'etichetta dell'asse Y nella demo ha un valore writing-mode pari a vertical-rl, puoi utilizzare gli stessi valori margin su entrambe le etichette. Il valore margin-block-start si applica a entrambe le etichette perché l'inizio del blocco è a destra per l'asse Y e in alto per l'asse X. I lati della parte iniziale del blocco hanno un bordo rosso, così puoi vederli.

Risoluzione del problema dell'icona

Ora che abbiamo esaminato le proprietà logiche, queste conoscenze possono essere applicate al problema di progettazione con cui abbiamo iniziato.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  flex: none;
}

Il margine è stato applicato a destra dell'elemento icona. Per fare in modo che la spaziatura tra l'icona e il testo supporti tutte le direzioni di lettura, al suo posto deve essere usata la proprietà margin-inline-end.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 0.5em;
  flex: none;
}

A prescindere dalla direzione di lettura, l'icona si posizionerà e si posiziona in modo appropriato.

Verifica le tue conoscenze

Verifica le tue conoscenze delle proprietà logiche

Mentre scrivi con la mano, il polso si muove lungo quale asse logico?

inline
block

Seleziona tutto ciò che può trarre vantaggio dalle proprietà logiche

colori
sizes
allineamento
lati della scatola
ombre
angoli dei riquadri

Quale lato logico di una parola è sottolineato?

fine blocco
inizio blocco
inizio in linea
fine in linea