Introductory CSS Property Guide | Michael Geron

The initial letter is a CSS feature that allows you to control the style of the first letter of the element. There are many ways to “hack” a shape by first wrapping the letter in a space and then adding CSS to the class to fake the shape. However, using the initials feature, we can get this shape without any hexes and at the same time control the number of lines occupying it, if it is up or down.

Example of initial letter

p:first-of-type::first-letter { 
  initial-letter: 2;
}
<p>Curabitur blandit tempus porttitor. Vivamus...</p>

In our example we are targeting the element of the article, and then zooming within the first paragraph and then further targeting the first letter. We are then asking for the first letter of the first paragraph to add a value of 2 to the initial letter of the property.

The result is that the first letter will now spread over 2 lines, plain! If we want to spread on 3 or 4 lines we just need to update this value and that’s it.

Pick up and drop.

It is also possible with the initial letter feature whether the first letter goes down or up. If not specified, the browser assumes it is the drop you want to use.

Fall down

In this example it will drop the first letter below 3 lines.

p:first-of-type::first-letter { 
  initial-letter: 3 drop;
}

pick on

This will raise the first letter above 2 lines.

p:first-of-type::first-letter { 
  initial-letter: 2 raise;
}

Pick up and drop.

You can also take a combination of both increase and drop by stating the values ​​of the two numbers.

p:first-of-type::first-letter { 
  initial-letter: 2 3;
}

Complete syntax and values

initial-letter: normal | [ ] |  && [drop | raise]

Browser support

Browser support is not very good at the time of writing, it is not supported in IE, Edge, Firefox or Chrome. This is supported by Safari using the -webkit-former.

Further reading

Michael Geron

written by

Mike

Michael Geron is a Senior Interaction Designer at Companies House in Cardiff. Prior to that, Mike was a product designer at GoCo Group, including GoCompare, MyVoucherCodes and WeFlip. Also working for brands such as BrandContent and HEOR in South Wales.

Add a Comment

Your email address will not be published. Required fields are marked *