Another lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, deleniti saepe! Labore alias nemo quam perferendis harum ducimus at qui omnis magni amet eius, optio dolorum? Aliquid harum molestias voluptatibus.
Revision:
The initial-letter property specifies the first letter and the number of lines it occupies. This property appears in newspapers where the first letter is larger than the rest of the content.
Negative values are not allowed.
Syntax examples:
/* Keyword values */
initial-letter: normal;
/* Numeric values */
initial-letter: 1.5; /* Initial letter occupies 1.5 lines */
initial-letter: 3; /* Initial letter occupies 3 lines */
initial-letter: 3 2; /* Initial letter occupies 3 lines and sinks 2 lines */
/* Global values */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;
Values:
normal : no special initial-letter effect. Text behaves as normal.
number : defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed.
integer : defines the number of lines the initial letter should sink when the size of it is given. Values must be greater than zero. If omitted, it duplicates the size value, floored to the nearest positive whole number.
The property takes two space separated values.
The first argument defines the size of the letter and how many lines it will occupy. The letter will scale up whilst maintaining its aspect ratio.You can't use a negative value but you can use decimal values.
The second argument defines the letter sink. This can be thought of as the offset for where the letter will sit. The second value is optional and can't be negative. If it isn't present, it assumes the value for the letter size floored to the nearest integer. This is equivalent to using the keyword “drop”. The sink also accepts another keyword value, “raise” which is equivalent to a sink of 1.
Initial letter is normal
Initial letter occupies 1.5 lines
Initial letter occupies 3 lines
<div>
<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>
</div>
<style>
.normal::first-letter {-webkit-initial-letter: normal; initial-letter: normal;}
.onefive::first-letter {-webkit-initial-letter: 1.5; initial-letter: 1.5;}
.three::first-letter {-webkit-initial-letter: 3; initial-letter: 3;}
</style>
<div>
<article class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</article>
</div>
<style>
article {width: 80%;}
.example::first-letter {-webkit-initial-letter: 2; initial-letter: 2; color: blue; font-weight: bold; margin-right: .6vw;}
</style>
Another lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, deleniti saepe! Labore alias nemo quam perferendis harum ducimus at qui omnis magni amet eius, optio dolorum? Aliquid harum molestias voluptatibus.
<main>
<p class="letter">Another lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, deleniti saepe!
Labore alias nemo quam perferendis harum ducimus at qui omnis magni amet eius, optio dolorum?
Aliquid harum molestias voluptatibus.</p>
<pre style="border:none;">
<code></code>
</pre>
<div class="actions">
<label for="lines">Lines</label>
<input id="lines" type="range" min="1" max="10" step="0.1" value="6" />
<label for="offset">Offset</label>
<input id="offset" type="range" min="1" max="10" step="1" value="6" />
</div>
</main>
<style>
input {accent-color: var(--indigo-6); }
code {font-size: 1vw; font-family: Helvetica, Arial, sans-serif;}
p.letter {transition: all 0.2s;}
p.letter:first-of-type:first-letter {font-family: "Merriweather", serif; initial-letter: var(--initial, 2 2);
-webkit-initial-letter: var(--initial, 2 2); font-weight: bold; margin-right: 1vw; color: var(--indigo-8);
text-shadow: 0.25vw 0.25vw purple;}
p.letter {width: 50ch;}
main {display: grid; gap: var(--size-4); place-items: center; }
label {font-weight: bold;}
.actions {display: inline-grid; grid-template-columns: auto auto; justify-content: center; gap: var(--size-2);}
</style>
<script>
const LINES = document.querySelector("#lines");
const OFFSET = document.querySelector("#offset");
const CODE = document.querySelector("code");
const UPDATE = () => {
document.documentElement.style.setProperty(
"--initial",
`${LINES.value} ${OFFSET.value}`
);
CODE.innerHTML = `p:first-letter {
initial-letter: ${LINES.value} ${OFFSET.value};
}
`;
};
UPDATE();
LINES.addEventListener("input", UPDATE);
OFFSET.addEventListener("input", UPDATE);
</script>