CSS Initial Letter

Method of creating an enlarged cap, including a drop or raised cap, in a robust way.

Spec	https://www.w3.org/TR/css-inline/#initial-letter-styling
Status	W3C Working Draft

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

1. Safari implementation is incomplete. Does not allow applying web fonts to the initial letter.

^* Partial support with prefix.

Bugs

• Safari 9 doesn't properly shorten the first line of text. Applying margin-top: 1em to the letter fixes this problem.

Resources

• Firefox Implementation Ticket
• MDN Web Docs - CSS initial-letter
• Blog post on Envato Tuts+, "Better CSS Drop Caps With initial-letter"
• Demos at Jen Simmons Labs