Dovresti sottolineare lo scontro con i discendenti del testo?

Il modulo di decorazione del testo CSS3 include una proprietà text-underline-position , che specifica se la sottolineatura deve essere posizionata sotto l'intero testo:

o appena sotto la linea di base, lasciandolo in contrasto con i discendenti del testo:

Okay, sappiamo tutti come sottolineare che dovrebbe essere usato solo come ultima risorsa, ma ... se hai intenzione di usarlo, qual è il modo più comune di farlo? Quali sono i pro e i contro di ogni stile sottolineato?

Qual è il più comune?

Bene, alcuni tipografi diranno che la sottolineatura dovrebbe probabilmente essere evitata tutti insieme e che la sottolineatura è appropriata solo per l'uso su macchine da scrivere o collegamenti ipertestuali sul web. Tuttavia, aggiungerei che la creatività consiste nel vedere le opportunità di infrangere le regole in modo creativo, quindi quanto lasci a te questa guida.

Sul web, avendo appena sotto la linea di base, i discendenti sovrapposti, è più comune. Ma questo è solo perché questo è sempre stato il rendering predefinito per i principali browser fino a questo punto.

Sulle macchine da scrivere, la sottolineatura si sovrappone ai discendenti, ma in modo leggermente diverso: rientra in parte tra i due esempi ( esempio ). Se guardi la linea di base del discensore, come il ciclo inferiore go il serif inferiore di p(in un carattere serif), è qui che si trova la sottolineatura. Quindi "si unisce" al fondo dei discensori.

Pro e contro

Il vantaggio di avere la sottolineatura si sovrappone ai discendenti è che non influisce affatto sulla spaziatura della linea (o "iniziale") - non è necessario aumentare lo spazio tra le linee per adattarsi alla sottolineatura.

Il vantaggio di averlo completamente libero dai discendenti è la leggibilità, se questo è importante. Ma avresti lo svantaggio di dover aumentare la spaziatura tra le linee. Se la tua situazione consente comunque un sacco di interlinea, allora provaci.

Se stai usando il web, la sottolineatura è fortemente associata ai collegamenti ipertestuali. Pertanto, qualsiasi uso di sottolineatura dovrebbe essere evitato per il testo che non fa parte di un collegamento. Significa ciò che vuoi significare in altri modi - usando invece grassetto , corsivo o TUTTI MAIUSCOLI.

Sono convinto che qualsiasi testo sottolineato sia generalmente così minore che la differenza sia inesistente per il lettore. Questa è una di quelle cose di cui al designer può interessare molto , ma i lettori non lo fanno mai. È tutto più una scelta stilistica secondo me.

Preferisco di gran lunga il posizionamento di base con una pausa ai discensori: vale a dire text-decoration-skip: ink;, tuttavia, al momento non è realmente supportato. Sono arrivato al punto di avere due classi e aggiungere un intervallo ai discensori per rimuovere la sottolineatura da loro. (il testo sostituisce via php, quindi non è molto il codice da creare).

Non userò mai il trucco border-bottom (o l'attributo bottom) a causa dell'offset. Trovo che, con i miei lettori, l'offset della sottolineatura sia molto, molto, molto più fonte di distrazione per loro di ogni altra cosa.

Cerco di passare a grassetto, corsivo, corsivo grassetto o variazioni di colore, piuttosto che sottolineare quando possibile.

La descrizione delletext-decoration: underline specifiche CSS 2.1 definisce il suo effetto come sottolineato, senza dettagli, ma i browser lo implementano come se fosse leggermente al di sotto della linea di base. Pertanto, spesso taglia discendenti (e segni diacritici posti sotto una lettera).

Nella bozza del testo CSS3, c'è la text-underline-positionposizione, ma non sembra essere supportata da nessun browser. (Secondo le informazioni di css666.com , è supportato da IE, ma almeno su IE 9, il supporto sembra essere limitato al riconoscimento della proprietà e all'accettazione del valore auto, il valore iniziale - quindi non è realmente supportato.) Aggiornamento : attualmente , IE (dalla versione 6) ha un po 'più di supporto , ma ti permette davvero di posizionare la sottolineatura sopra il testo (!) E non sotto di essa.

Come descritto nella risposta di Scott e nel commento di Joonas, puoi usare un bordo inferiore per simulare una sottolineatura, e quindi hai un controllo abbastanza buono sullo stile "sottolineato". Questo potrebbe essere adatto, ad esempio, per i collegamenti sottolineati che stanno da soli, non in linea. Per il testo in linea, dove potresti voler sottolineare, ad esempio perché stai stampando HTML che contiene sottolineature, la normale sottolineatura CSS è probabilmente migliore, perché tale sottolineatura corrisponde più o meno alle tradizioni della stampa.