Log in / Register

Forum › Documentation

creating drop caps

somnath
Hi,

I want to create drop caps for the first paragraphs in each section of a chapter. For this I used the following;

div p:first-of-type::first-letter {
font-family: serif;
font-size: 28pt;
line-height: 30pt;
color: red;
float: left;
}

The problem here I have with pdf is that the "first letter does not float" but is happy to take all other properties defined for it.

Please help.
Thanks in advance.

Somnath
mikeday
Sorry, I thought this post was already answered but perhaps the forum ate it. At the moment float doesn't apply to the ::first-letter pseudo-element, so you need to wrap up the first letter in an element like <span> to turn it into a drop-cap.
oliof
Hi,
are there any plans to change this?
mikeday
Yes, it's on the roadmap, but it probably won't be in the next maintenance release.
jim_albright
I use the following to create the drop cap effect for chapter numbers in Scripture:

.chapterNumber {
string-set: chapterx content();
float:left;
vertical-align: top;
color:#D4D4C7;
font-size:28pt;
line-height: 26pt;
margin: 0;
padding: 0 0.5em 0 0;
font-family:sans-serif;
}

Jim Albright
Wycliffe Bible Translators

mikeday
It took longer than we expected, but float is now supported on ::first-letter pseudo-elements in Prince 8.1 rev 4. Thanks for your patience! :D
nico
Hi,

When an element begins with a quote, no matter which type, the first-letter selector does not behave the same in Safari and Prince. You can check the differences on the pictures below.

For me, both Safari and Prince are wrong, only the quote should be selected. But still Safari does what I want but not Prince.

Do you have a workaround ?

Nicolas

P.S. : Note that the French typography enforces a non breaking space between text and quotes.


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Test Drop Cap</title>
	<style type="text/css">
		.chapter > p:nth-of-type(1)::first-letter {
			font-size: 48px;
			float: left;
			margin-right: 9px;
			margin-top: 12px;
			display: block;
			line-height: 25px;
		}
	</style>
</head>
<body>
<div class="chapter"><p>Test drop cap<br />&nbsp;</p></div>
<div class="chapter"><p>«&nbsp;Test drop cap&nbsp;»<br />&nbsp;</p></div>
<div class="chapter"><p>"&nbsp;Test drop cap&nbsp;"<br />&nbsp;</p></div>
<div class="chapter"><p>“&nbsp;Test drop cap&nbsp;”<br />&nbsp;</p></div>
</body>
</html>
  1. test_drop_cap_prince.png‎ 14.5 kB
  2. test_drop_cap_safari.png‎ 12.3 kB
mikeday
Prince is consistent with Firefox for this test case. I would suggest wrapping the quote in a span and styling that. You could do this with JavaScript, if you would prefer to avoid changing the document markup.
dauwhe
I'd like to advocate for supporting real drop caps, based on the CSS Line Layout Module

Using the float method above, we have to use trial and error to determine the font size and line height to create the appropriate effect, and a different font would require different numbers. And it's quite hard to get the exact alignment needed. Something like the following for a three-line drop cap would be much easier for authors:

span.dropcap {
font-family: Poetica;
drop-initial-value: 3;
}


Many major publishers have stopped using dropcaps in ebooks due to the impossibility of good formatting across font changes. I'm on a mission to convince the big browsers to support this :)

Dave


mikeday
I had not seen that, we'll keep it in mind for future work. :)
_savage
Dave, this is great stuff to look forward to!

For now, I think I'm going to refrain from using drop caps for the same reasons that Dave mentions: it's too hard to get baseline aligned and working for every instance of a character (especially when there's descenders involved like in a capital "J").

The other challenge I noticed was moving the first line of a drop cap "A" closer to the left. I can't think of a selector, and it seems using markup is the only option here?

Bummer :)

Edited by _savage

dauwhe
The CSS Working Group had a long, productive discussion about these on Tuesday. An updated editor's draft of the proposal should be online within a day or so. There's lots of interest from the browser vendors on this!
dauwhe
New proposal for drop caps:

http://dev.w3.org/csswg/css-inline/#DropInitial

Dave

_savage
Thank you Dave!

That proposal is interesting, but issues 10-14 listed there are exactly what I struggle with right now. I don't think there is any clean and reliable way to render drop caps without working with the character baseline. However, CSS does not know of baseline.

Which brings me to the question in this thread: how can I align characters of different sizes (or even of different typeface) without taking their respective baselines into account?