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