CSS text-emphasis-style
La proprietà CSS3 text-emphasis-style definisce la forma dei simboli di enfasi
Con la proprietà text-emphasis-style puoi decidere quale simbolo usare come segno di enfasi sul testo. Puoi scegliere tra stili predefiniti come dot, circle, triangle o anche usare un carattere personalizzato tra virgolette, come '★'. È uno strumento particolarmente utile per la tipografia giapponese, ma può essere impiegato anche in design creativi in altri contesti.
Sintassi
Significato dei valori principali:
-
dot: un punto pieno. Valore comunemente usato in testi giapponesi.
-
circle: un cerchio vuoto. Alternativa leggera al punto pieno.
-
double-circle: un doppio cerchio. Più decorativo rispetto a
circle. -
triangle: un piccolo triangolo rivolto verso l’alto.
-
sesame: un segno simile a una piccola virgola (simile al “sesamo” usato nei testi asiatici).
-
'char': un singolo carattere personalizzato racchiuso tra virgolette singole, es.
'★','◆'. -
none: disattiva i segni di enfasi, utile per rimuovere stili precedentemente applicati.
Esempio proprietà: text-emphasis-style
Codice Esempio: text-emphasis-style
.text-emphasis-style-example {
font-size: 28px;
text-emphasis-style: dot;
text-emphasis-color: #0066cc;
writing-mode: horizontal-tb;
}
Contenuto Esempio: text-emphasis-style
Esempio di utilizzo di text-emphasis-style
In questo esempio, la proprietà text-emphasis-style viene usata per applicare dei cerchi pieni come segni di enfasi:
CSS e HTML per l'elemento con text-emphasis-style:
<style>
.text-emphasis-style-example {
font-size: 28px;
text-emphasis-style: dot;
text-emphasis-color: #0066cc;
writing-mode: horizontal-tb;
}
</style>
<div class="text-emphasis-style-example">
Testo con punti di enfasi
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
