- Let's talk about drop caps and large caps,
and the things that you can now do
with a CSS property called Initial Letter.
Graphic design uses a lot of enlarged caps.
Really the job of a drop cap,
or an enlarged cap is to catch people's eye
and show them where the text begins.
I've been advocating for a lot of different new,
interesting graphic design layouts,
different kinds of layouts now
that we have tools like CCS Grid.
And when I do, a lot of people think, well you don't want
to break user experience, we don't want to go too far.
I agree. We don't want to go too far.
Sometimes subtle changes can really have a profound effect
and brighten up the feeling of your design,
give it more interest, bring people in
a little bit more, let them focus better.
But one of the things we can do to avoid confusion,
or avoid frustration with user experience
as we do make changes to our layout
is use drop caps the way that they're used in magazines.
Which is, when maybe the layout is a little bit unusual
and people aren't really sure where to first start,
where to go in order to start reading an article,
for example, you can use a drop cap to mark it
really clearly where they should start.
People will know what that means because
they're used to magazines, people know
how to flip through a magazine and see which page
is actually the page where the article starts,
and to go right to where it is,
no matter where that is in the spread of the magazine.
So, we don't need to train people how to do that on the web,
they're going to do that naturally.
We can just start using drop caps for this particular job.
I think it's interesting to think about drop caps
in that way because we... it's almost like
we haven't known what to do with them on the web
and we've just been using them as a kind of a decoration.
Which is fine, they do convey a sense of polish,
or maybe a little bit more seriousness,
or it's a way to convey quality in journalism,
or quality in writing, by having that
kind of styling on a piece.
But I also think that even when you're not looking
for that kind of feeling from the art direction,
there might be a good use for drop caps
to help guide people's eye and let them know
where they should start reading.
Here, we can see some examples of drop caps on the web.
We have been trying to do this for many years.
The hard thing about the old techniques we had
was that really you would grab a hold of the letter
by using the pseudo-element first-letter,
but then you had to make it bigger
by using font size, the only technology we had,
by floating it to the right and just
hoping that it kind of lined up.
But because web browsers each render font size
a little bit differently, often it might work
in one browser where the drop cap would line up
beautifully with the bottom edge of one line of text,
but then you'd open another browser and the drop cap
was like, a little bit too tall,
or a little bit too small and it didn't really line up.
I see things like that all the time.
Here are three examples, they happen to all be
from mobile designs but it happens
whether the page is wide or narrow.
I like the one on the right, The Intercept
because it's almost like they said,
"yeah, we know it's not going to line up,
so let's just create a big extra space,
we'll call it art and we won't even try to line it up."
But now that we have this new CSS property,
we can start to have things line up very accurately.
So here's how it works, we use these pseudo-element
first-letter to target the particular letter
that we want to go after, and then we use this
property called initial-letter,
with a value that's a number, like "initial-letter: 4".
And that basically tells the browser, hey,
I want you to take that letter and just
make it the size of four lines of text.
And that way, if the font doesn't download,
or the user enlarges their font,
or there's something else about the way the page renders
that's not what you expected as the person
who wrote the CSS, it's going to work out fine.
It's always going to be the height of four lines
of regular text, which is the entire point.
Right now, this only works in Safari
and so you need the WebKit prefix in order to use it,
but you can use it today and maybe 12%
of the market will get it. So here's another example.
One other thing that initial letter can do,
you can have two numbers, where you say,
"initial-letter 4", which means I want the cap
or the character to be the height of four lines of text,
or the width if you're in a vertical writing direction,
but I want it to stick up and only overlap by one line.
So you can see here, this C is the height of
four lines of text, but it only overlaps one line.
And we could say "4 2" and it would overlap
two lines but be the height of four lines of text.
You could say "5 3", in which case
it would be the height of five
but it would only overlap three lines of text,
there's some variations of things
you could do to mess around with that.
Here's another example that I put together,
I put some padding on this particular character
and I put a border around it, as well as a margin.
Just to give it a nice little box to stick in.
The character itself is the height of four lines of text,
"initial-letter: 4" but the total box is,
there's more stuff going on and will be...
You know, that's done here, manually
a little bit with some padding and some margin.
You do have to think through the progressive enhancement,
and I have a video more about this
and progressive enhancement I actually use as an example.
You don't want to just rely on typical techniques
of overrides and fallbacks or ACS as error handling,
because the other kinds of styling you might be applying
is going to get applied, so you're going to want to
wrap up any set of CSS that's for styling a drop cap
in a future query, which I also explain in the other video.
And that would give you the opportunity to deliver
a really beautifully sized, perfect drop cap
to the browsers that have support for initial letter,
while meanwhile just doing the normal thing
with no drop cap for all of the other browsers.
Ship this today, even if a tiny fraction of your users
have support for this, it will be a nice detail for them.
Everybody else will get it slowly
over time, as other browsers catch up.
I know we're working on this for Firefox,
it should be coming out sometime later this year,
into next year, at some point we're definitely
going to ship support for this.
So it is going to be a bigger and bigger thing.
Initial letter, check it out.
Right now, the WebKit implementation does have a few bugs,
not that it's broken but more that
there's things that initial letter
is supposed to do that it doesn't do yet.
So you can go ahead and make the letter bigger,
in the future we'll be able to apply a different font,
maybe some sort of fancy wood carved letter,
or you can kind of handle the graphic design more.
Right now it doesn't do those things,
but right now we can just do this sort of
simple use case very beautifully
and let our users see drop caps,
help them find the beginning of the text.
Initial letter, try it out.