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://drafts.csswg.org/css-text-decor-3/#text-emphasis-property
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			103
		100	102
		99	101	TP
11	99	98	100	15.4	83 (1,*)
10	98 (1,*)	97	99	15.2-15.3	82 (1,*)
9	97 (1,*)	96	98 (1,*)	15.1	81 (1,*)
8	96 (1,*)	95	97 (1,*)	15	80 (1,*)
Show all
7	95 (1,*)	94	96 (1,*)	14.1	79 (1,*)
6	94 (1,*)	93	95 (1,*)	14	78 (1,*)
5.5	93 (1,*)	92	94 (1,*)	13.1	77 (1,*)
	92 (1,*)	91	93 (1,*)	13	76 (1,*)
	91 (1,*)	90	92 (1,*)	12.1	75 (1,*)
	90 (1,*)	89	91 (1,*)	12	74 (1,*)
	89 (1,*)	88	90 (1,*)	11.1	73 (1,*)
	88 (1,*)	87	89 (1,*)	11	72 (1,*)
	87 (1,*)	86	88 (1,*)	10.1	71 (1,*)
	86 (1,*)	85	87 (1,*)	10	70 (1,*)
	85 (1,*)	84	86 (1,*)	9.1	69 (1,*)
	84 (1,*)	83	85 (1,*)	9	68 (1,*)
	83 (1,*)	82	84 (1,*)	8	67 (1,*)
	81 (1,*)	81	83 (1,*)	7.1	66 (1,*)
	80 (1,*)	80	81 (1,*)	7 (1,*)	65 (1,*)
	79 (1,*)	79	80 (1,*)	6.1 (1,*)	64 (1,*)
	18	78	79 (1,*)	6	63 (1,*)
	17	77	78 (1,*)	5.1	62 (1,*)
	16	76	77 (1,*)	5	60 (1,*)
	15	75	76 (1,*)	4	58 (1,*)
	14	74	75 (1,*)	3.2	57 (1,*)
	13	73	74 (1,*)	3.1	56 (1,*)
	12	72	73 (1,*)		55 (1,*)
		71	72 (1,*)		54 (1,*)
		70	71 (1,*)		53 (1,*)
		69	70 (1,*)		52 (1,*)
		68	69 (1,*)		51 (1,*)
		67	68 (1,*)		50 (1,*)
		66	67 (1,*)		49 (1,*)
		65	66 (1,*)		48 (1,*)
		64	65 (1,*)		47 (1,*)
		63	64 (1,*)		46 (1,*)
		62	63 (1,*)		45 (1,*)
		61	62 (1,*)		44 (1,*)
		60	61 (1,*)		43 (1,*)
		59	60 (1,*)		42 (1,*)
		58	59 (1,*)		41 (1,*)
		57	58 (1,*)		40 (1,*)
		56	57 (1,*)		39 (1,*)
		55	56 (1,*)		38 (1,*)
		54	55 (1,*)		37 (1,*)
		53	54 (1,*)		36 (1,*)
		52	53 (1,*)		35 (1,*)
		51	52 (1,*)		34 (1,*)
		50	51 (1,*)		33 (1,*)
		49	50 (1,*)		32 (1,*)
		48	49 (1,*)		31 (1,*)
		47	48 (1,*)		30 (1,*)
		46	47 (1,*)		29 (1,*)
		45 (2)	46 (1,*)		28 (1,*)
		44	45 (1,*)		27 (1,*)
		43	44 (1,*)		26 (1,*)
		42	43 (1,*)		25 (1,*)
		41	42 (1,*)		24 (1,*)
		40	41 (1,*)		23 (1,*)
		39	40 (1,*)		22 (1,*)
		38	39 (1,*)		21 (1,*)
		37	38 (1,*)		20 (1,*)
		36	37 (1,*)		19 (1,*)
		35	36 (1,*)		18 (1,*)
		34	35 (1,*)		17 (1,*)
		33	34 (1,*)		16 (1,*)
		32	33 (1,*)		15 (1,*)
		31	32 (1,*)		12.1
		30	31 (1,*)		12
		29	30 (1,*)		11.6
		28	29 (1,*)		11.5
		27	28 (1,*)		11.1
		26	27 (1,*)		11
		25	26 (1,*)		10.6
		24	25 (1,*)		10.5
		23	24		10.0-10.1
		22	23		9.5-9.6
		21	22		9
		20	21
		19	20
		18	19
		17	18
		16	17
		15	16
		14	15
		13	14
		12	13
		11	12
		10	11
		9	10
		8	9
		7	8
		6	7
		5	6
		4	5
		3.6	4
		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
15.4	all	99	10 (1,*)	64 (1,*)	100	98	11	12.12 (1,*)	16.0 (1,*)	10.4 (1,*)	7.12 (1,*)	2.5
15.2-15.3		4.4.3-4.4.4 (1,*)	7	12.1			10		15.0 (1,*)
15.0-15.1		4.4 (1,*)		12					14.0 (1,*)
14.5-14.8		4.2-4.3		11.5					13.0 (1,*)
Show all
14.0-14.4		4.1		11.1					12.0 (1,*)
13.4-13.7		4		11					11.1-11.2 (1,*)
13.3		3		10					10.1 (1,*)
13.2		2.3							9.2 (1,*)
13.0-13.1		2.2							8.2 (1,*)
12.2-12.5		2.1							7.2-7.4 (1,*)
12.0-12.1									6.2-6.4 (1,*)
11.3-11.4									5.0-5.4 (1,*)
11.0-11.2									4 (1,*)
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.
• Microsoft Edge feature request on UserVoice
• MDN Web Docs - text-emphasis
• Chromium bug to unprefix `-webkit-text-emphasis`