The initial-letter-align property for CSS specifies the alignment points used to size and position an initial letter. Two sets of alignment points are necessary: the over and under alignment points of the initial letter are matched to corresponding over and under points of the root inline box.
initial-letter-align: value; object.style.initialLetterAlign = "value"; <'initial-letter-align'> =
[ border-box? [ alphabetic | ideographic | hanging | leading ]? ]! border-box Use the initial letter box’s line-under and line-over border edges as the over and under alignment points, respectively.
alphabetic Use the cap-height and alphabetic baselines of the surrounding text to align the initial letter.
ideographic Use the ideographic-ink-over and ideographic-ink-under baselines of the surrounding text to align the initial letter.
hanging Use the hanging and alphabetic baselines of the surrounding text to align the initial letter.
leading Use the over/under half-leading edges (i.e. ascent/descent + half-leading) of the surrounding text to align the initial letter.
<!doctype html>
<html>
<head>
<style>
p::first-letter
{
initial-letter: 2;
initial-letter-align: alphabetic;
}
</style>
</head>
<body>
<p>alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic alphabetic</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p::first-letter
{
initial-letter: 2;
initial-letter-align: ideographic;
}
</style>
</head>
<body>
<p>ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic ideographic</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p::first-letter
{
initial-letter: 2;
initial-letter-align: hanging;
}
</style>
</head>
<body>
<p>hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging hanging</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p::first-letter
{
initial-letter: 2;
initial-letter-align: leading;
}
</style>
</head>
<body>
<p>leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading leading</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p::first-letter
{
initial-letter: 2;
initial-letter-align: var(--myvar, alphabetic);
}
</style>
</head>
<body>
<button>initial</button>
<button>border-box</button>
<button>alphabetic</button>
<button>ideographic</button>
<button>hanging</button>
<button>leading</button>
<p>initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align initial-letter-align</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.setProperty("--myvar", myparameter.target.innerHTML);
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>