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