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.
