Drop Caps on the Web Using Initial Letter

– 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.

Leave a Reply

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