initial-letter

Description
Syntax
Examples
Links

Description

The initial-letter property for CSS specifies the size and sink for dropped, raised, and sunken initial letters as the number of lines spanned.

Syntax

CSS

initial-letter: value;

JS

object.style.initialLetter = "value";

Values

<'initial-letter'> =
    normal |
    <number [1,∞]> <integer [1,∞]> |
    <number [1,∞]> && [ drop | raise ]?

normal

No special initial letter effect. Text behaves as normal.

<number [1,∞]>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<integer [1,∞]>

Specifies one or more decimal digits (0-9).

drop

Computes to an initial letter sink of 1.

raise

Computes to an initial letter sink equal to the initial letter size floored to the nearest positive whole number.

Initial

normal

Examples

1 · normal

2 · number

3 · integer

4 · drop

5 · raise

6 · JS

<!doctype html>
<html>
<head>
    <style>
        p::first-letter
        {
            initial-letter: var(--myvar, 1);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>normal</button>
    <button value="2.4">number</button>
    <button value="2.4 8">integer</button>
    <button value="2.4 drop">drop</button>
    <button value="2.4 raise">raise</button>
    <p>initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter initial-letter</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("p").style.setProperty("--myvar", myproperty);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>