text-emphasis styling

Method of using small symbols next to each glyph to emphasize a run of text, commonly used in East Asian languages. The text-emphasis shorthand, and its text-emphasis-style and text-emphasis-color longhands, can be used to apply marks to the text. The text-emphasis-position property, which inherits separately, allows setting the emphasis marks' position with respect to the text.

Spec	https://w3c.github.io/csswg-drafts/css-text-decor-3/#text-emphasis-property
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			108
		107	107	TP
		106	106	16.1
11	105	105	105	16.0	91
10	104	104	104	15.6	90
9	103	103	103	15.5	89
8	102	102	102	15.4	88
Show all
7	101	101	101	15.2-15.3	87
6	100	100	100	15.1	86
5.5	99	99	99	15	85 (1,*)
	98 (1,*)	98	98 (1,*)	14.1	84 (1,*)
	97 (1,*)	97	97 (1,*)	14	83 (1,*)
	96 (1,*)	96	96 (1,*)	13.1	82 (1,*)
	95 (1,*)	95	95 (1,*)	13	81 (1,*)
	94 (1,*)	94	94 (1,*)	12.1	80 (1,*)
	93 (1,*)	93	93 (1,*)	12	79 (1,*)
	92 (1,*)	92	92 (1,*)	11.1	78 (1,*)
	91 (1,*)	91	91 (1,*)	11	77 (1,*)
	90 (1,*)	90	90 (1,*)	10.1	76 (1,*)
	89 (1,*)	89	89 (1,*)	10	75 (1,*)
	88 (1,*)	88	88 (1,*)	9.1	74 (1,*)
	87 (1,*)	87	87 (1,*)	9	73 (1,*)
	86 (1,*)	86	86 (1,*)	8	72 (1,*)
	85 (1,*)	85	85 (1,*)	7.1	71 (1,*)
	84 (1,*)	84	84 (1,*)	7 (1,*)	70 (1,*)
	83 (1,*)	83	83 (1,*)	6.1 (1,*)	69 (1,*)
	81 (1,*)	82	81 (1,*)	6	68 (1,*)
	80 (1,*)	81	80 (1,*)	5.1	67 (1,*)
	79 (1,*)	80	79 (1,*)	5	66 (1,*)
	18	79	78 (1,*)	4	65 (1,*)
	17	78	77 (1,*)	3.2	64 (1,*)
	16	77	76 (1,*)	3.1	63 (1,*)
	15	76	75 (1,*)		62 (1,*)
	14	75	74 (1,*)		60 (1,*)
	13	74	73 (1,*)		58 (1,*)
	12	73	72 (1,*)		57 (1,*)
		72	71 (1,*)		56 (1,*)
		71	70 (1,*)		55 (1,*)
		70	69 (1,*)		54 (1,*)
		69	68 (1,*)		53 (1,*)
		68	67 (1,*)		52 (1,*)
		67	66 (1,*)		51 (1,*)
		66	65 (1,*)		50 (1,*)
		65	64 (1,*)		49 (1,*)
		64	63 (1,*)		48 (1,*)
		63	62 (1,*)		47 (1,*)
		62	61 (1,*)		46 (1,*)
		61	60 (1,*)		45 (1,*)
		60	59 (1,*)		44 (1,*)
		59	58 (1,*)		43 (1,*)
		58	57 (1,*)		42 (1,*)
		57	56 (1,*)		41 (1,*)
		56	55 (1,*)		40 (1,*)
		55	54 (1,*)		39 (1,*)
		54	53 (1,*)		38 (1,*)
		53	52 (1,*)		37 (1,*)
		52	51 (1,*)		36 (1,*)
		51	50 (1,*)		35 (1,*)
		50	49 (1,*)		34 (1,*)
		49	48 (1,*)		33 (1,*)
		48	47 (1,*)		32 (1,*)
		47	46 (1,*)		31 (1,*)
		46	45 (1,*)		30 (1,*)
		45 (2)	44 (1,*)		29 (1,*)
		44	43 (1,*)		28 (1,*)
		43	42 (1,*)		27 (1,*)
		42	41 (1,*)		26 (1,*)
		41	40 (1,*)		25 (1,*)
		40	39 (1,*)		24 (1,*)
		39	38 (1,*)		23 (1,*)
		38	37 (1,*)		22 (1,*)
		37	36 (1,*)		21 (1,*)
		36	35 (1,*)		20 (1,*)
		35	34 (1,*)		19 (1,*)
		34	33 (1,*)		18 (1,*)
		33	32 (1,*)		17 (1,*)
		32	31 (1,*)		16 (1,*)
		31	30 (1,*)		15 (1,*)
		30	29 (1,*)		12.1
		29	28 (1,*)		12
		28	27 (1,*)		11.6
		27	26 (1,*)		11.5
		26	25 (1,*)		11.1
		25	24		11
		24	23		10.6
		23	22		10.5
		22	21		10.0-10.1
		21	20		9.5-9.6
		20	19		9
		19	18
		18	17
		17	16
		16	15
		15	14
		14	13
		13	12
		12	11
		11	10
		10	9
		9	8
		8	7
		7	6
		6	5
		5	4
		4
		3.6
		3.5
		3
		2

Safari on iOS	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser	KaiOS Browser
16.1
16.0	all	105	10 (1,*)	64 (1,*)	105	104	11	13.4 (1,*)	18.0	13.1 (1,*)	13.18 (1,*)	2.5
15.6		4.4.3-4.4.4 (1,*)	7	12.1			10		17.0 (1,*)
15.5		4.4 (1,*)		12					16.0 (1,*)
15.4		4.2-4.3		11.5					15.0 (1,*)
Show all
15.2-15.3		4.1		11.1					14.0 (1,*)
15.0-15.1		4		11					13.0 (1,*)
14.5-14.8		3		10					12.0 (1,*)
14.0-14.4		2.3							11.1-11.2 (1,*)
13.4-13.7		2.2							10.1 (1,*)
13.3		2.1							9.2 (1,*)
13.2									8.2 (1,*)
13.0-13.1									7.2-7.4 (1,*)
12.2-12.5									6.2-6.4 (1,*)
12.0-12.1									5.0-5.4 (1,*)
11.3-11.4									4 (1,*)
11.0-11.2
10.3
10.0-10.2
9.3
9.0-9.2
8.1-8.4
8
7.0-7.1
6.0-6.1
5.0-5.1
4.2-4.3
4.0-4.1
3.2

Notes

Some old WebKit browsers (like Chrome 24) support -webkit-text-emphasis, but does not support CJK languages and is therefore considered unsupported.

1. Partial support refers to incorrect support for -webkit-text-emphasis-position. These browsers support over and under as values, but not the added left and right values required by the spec.

2. Can be enabled in Firefox using the layout.css.text-emphasis.enabled flag

^* Partial support with prefix.

Bugs

• Chrome on Android occasionally has issues rendering emphasis glyphs correctly.

Resources

• A javascript fallback for CSS3 emphasis mark.
• MDN Web Docs - text-emphasis
• Chromium bug to unprefix `-webkit-text-emphasis`