Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS initial-letter-align Property

The initial-letter-align property in CSS is known for specifying the alignment of the initial letters within a paragraph. This property may be specified as one of the keywords like- auto, alphabetic, hanging, and ideographic.

In the case of auto value, the user chooses the value which corresponds to the language of the text. In the case of alphabetic, the cap height of the initial letter gets aligned with the cap height of the first line of the text. And in the case of ideographic value, the initial letter is centered in the N-line area.

Syntax

[ auto | alphabetic | hanging | ideographic ]

Example: CSS initial-letter-align Property

In the example below, we have used the initial letter align property to design our texts. We have given the initial letter align property value as all the values of this property. We have given values as an auto, alphabetic, hanging, and ideographic and we have given different sentences for each of the values so that it can be easily distinguished.

<!DOCTYPE html>
<html>
<head>
	<title>The initial-letter-align property in CSS</title>
	<style type="text/css">
		.auto {
	  -webkit-initial-letter-align: auto;
	  initial-letter-align: auto;
	}	
	.alphabetic {
	  -webkit-initial-letter-align: alphabetic;
	  initial-letter-align: alphabetic;
	}	
	.hanging {
	  -webkit-initial-letter-align: hanging;
	  initial-letter-align: hanging;
	}	
	.ideographic {
	  -webkit-initial-letter-align: ideographic;
	  initial-letter-align: ideographic;
	}
	</style>
</head>
<body>
	<p class="auto ">Initial letter - auto</p>
	<p class="alphabetic">Initial letter - alphabetic</p>
	<p class="hanging">Initial letter - hanging</p>
	<p class="ideographic">Initial letter - ideographic</p>
</body>
</html>

Output

Example 2: CSS initial-letter-align Property

In this example, we have given the initial letter align property value as auto. Hence, our text gets designed in the way which is the default value for this property.

<!DOCTYPE html>
<html>
<head>
	<title>The initial-letter-align property in CSS</title>
	<style type="text/css">
		.auto {
	  -webkit-initial-letter-align: auto;
	  initial-letter-align: auto;
	  color: red;
	}	
	.alphabetic {
	  -webkit-initial-letter-align: auto;
	  initial-letter-align: auto;
	  color: purple;
	}	
	.hanging {
	  -webkit-initial-letter-align: auto;
	  initial-letter-align: auto;
	  color: deeppink;
	}	
	.ideographic {
	  -webkit-initial-letter-align: auto;
	  initial-letter-align: auto;
	  color: green;
	}
	</style>
</head>
<body>
	<p class="auto ">Study Tonight</p>
	<p class="alphabetic">Is the best place</p>
	<p class="hanging">to learn digital courses</p>
	<p class="ideographic">in a simplified way</p>
</body>
</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome no no
Edge no no
Firefox no no
Internet Explorer no no
Opera no no
Safari no no
Webview Android no no
Chrome Android no no
Firefox Android no no
Opera Android no no
IOS Safari no no

Samsung Internet

no

no

Conclusion

The initial value for the initial-letter-align property is auto. This property is applicable to the first-letter pseudo-elements and inline-level first child of a block container. It is not an inherited property. The computed value for this property is the as specified one.