Drop-Cap Fun 1
12 November 2017
Drop-caps are an old traditional book design component. Are they relevant for digital books in 2017?
Drop caps (also called Initials) have been around since publishing was writing by hand on a manuscript. The use of drop caps in modern publishing is still common but there is occassional discussion on whether it is needed, especially with digital content. But drop caps do make a great design option and there are those who state it makes starting reading a chapter easier. There are a number of challenges using drop caps in digital content for deliver to various reading systems, formats and packages. Some reading systems wont support their presentation and make make a mess of the layout.
This is the first of two articles on Drop Caps for digital content. See Part 2.
Drop caps can be made using the CSS pseudo-element ::first-letter. We generally doesn't use that. We use a span element on the first character(s). This means semantics are available for processors to make changes for different packages. For example when generating an EPUB 2 for old reading systems the drop-caps can be processed out. :first-letter buries the drop caps in the CSS.
NOTE: Drop caps in this article have a gray background to show font area. Normally this would not be enabled.
Different Size Drop Caps
For various design reasons book designers demand different drop cap line-heights. IGP:Digital Publisher with IGP:FoundationXHTML handles two, three, four and five line drop caps as standard for print, eBooks and Web Sites.
.dropcap-rw, .dropcap-3lines-rw, .dropcap-4lines-rw, .dropcap-4lines-rw
It also supports the easier to create raised cap. Here are the simple default drop caps with a bit of Lorem Ipsum.
| Phasel LUS FACIL ISIS magna dui, at finibus risus commodo ac. Nullam porta elit neque, non pellentesque felis suscipit sed. Sed pulvinar libero ac ex sollicitudin vulputate sed Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris ut sollicitudin. | Orem IPSUM DOLOR sit amet, consectetur adipiscing elit. Suspendisse congue, mauris ut sollicitudin tincidunt, sapien nibh imperdiet neque, et bibendum velit arcu vitae justo. Curabitur consectetur elit et pharetra posuere. |
| Nullam PORTA ELIT neque, non pellentesque felis suscipit sed. Sed pulvinar libero ac ex sollicitudin vulputate sed eu ante. Sed ultricies pellentesque rutrum. Curabitur vitae libero quam.Sed ultricies pellentesque rutrum. Curabitur vitae libero quam. | Curab ITUR CONSECT ETUR elit et pharetra posuere. Phasellus facilisis magna dui, at finibus risus commodo ac. Nullam porta elit neque, non pellentesque felis suscipit sed. Sed pulvinar libero ac ex sollicitudin vulputate sed eu ante. |
Different line height drop caps. 2, 3, 4 and 5 lines. The font is the rather large x-height DejaVu Serif, but it does work well for print and content online; probably not so well for eBook reading systems.
The general rule with drop cap vertical positioning is the baseline of the drop cap should align with the bottom text line baseline. It is OK if the top of the letter protrudes slightly over the top, especially for round characters.
Also the horizontal alignment should create an optically aligned left margin. That means some letters such as A, O, V, etc. should move "appropriately" into the margin. The D at the top of the page with large serifs has been moved horizontally so the vertical bar aligns with the margin.
There is always setting up to do with quality drop caps because sizing and positioning is very font specific.A little font analysis
When used on the web or in digital reading systems it is necessary to enable text re-sizing for various devices and accessibility issues. A drop cap in content targeting a reading platform should use CSS relative units. IE. ems.
This is a little fiddly because a good drop cap only use the Caps Height part of a font without the top space and descender space upsetting the design.
Fonts have different capital heights.For example this SVG image has DejaVu Serif, Times New Roman and URWGothicL-Book all at the same font-size.
The blue line shows all fonts are on the same baseline. The greenline shows the different caps height. The gray background shows the height of the font. To create accurate drop caps the cap height needs to be handled on a font basis.
The fonts are the same size but the different caps height between the fonts is obvious. When setting line-height for a drop cap we have to get that capital height as a fraction of the font-size. For any given font this will be the same for any drop cap size because in CSS, line-height is a proportion of the font-height.
For Deja Vu the rough Caps height calculation is around 60/78 = 0.76.
| CURA BITUR CONSECT ETUR elit et pharetra posuere. Phasellus facilisis magna dui, at finibus risus commodo ac. Nullam porta elit neque, non pellentesque felis suscipit sed. Sed pulvinar libero ac ex sollicitudin vulputate sed eu ante. | CURA BITUR CONSECT ETUR elit et pharetra posuere. Phasellus facilisis magna dui, at finibus risus commodo ac. Nullam porta elit neque, non pellentesque felis suscipit sed. Sed pulvinar libero ac ex sollicitudin vulputate sed eu ante. |
Here we clearly see the effect on the left with line-height:1; On the right with the calculated line-height: 0.76;.
Simple CSS and other strategies
Simple drop caps can be easily created with the :first-letter property. To position it apply the above rules for line-height and float: left;. With float applied the vertical-align property has no effect so if you want to fine-tune the vertical positioning you will need to use padding. Here is the CSS for this.
.dropcap2::first-letter {
font-size: 3.4em;
line-height: 0.76;
float: left;
padding: 0.05em 0 0 0;
color: rgb(0, 100,150);
font-weight: 700;
background-color:rgb(240,240,240);
}
An advantage of this approach is accessibility. There are no elements used to create the dropcap so there is nothing in the way of read-aloud systems. The paragraph has the class attribute drop-cap-rw applied to ensure there are semantics in the HTML. This means a processor creating multiple formats will know when to generate a drop cap no so manual intervention will be required.
A drop cap can also be an ornament (image) but that can introduce accessibility (A11Y) problems but it is easy to lock an image to a line-count height. For some reading systems this is still necessary if the designer is determined to have drop caps.
IGP:Digital Publisher has a processor option to change fonts to inline-images if that is a production preference.
IGP:Digital Publisher allows tagged characters to be converted to inline images when required for some formats.
Moving ahead
Because IGP:Digital Publisher uses one semantically tagged HTML to create books and documents for print, online, eBook formats and other packages, these "little" challenges have to be addressed as part of a consistent production strategy.
Contact us for more information and a demonstration of IGP:Digital Publisher for a powerful digitize Once, Use Forever publishing strategy.
Posted by Richard Pipe
Links Related to this Post