Drop-Cap Fun 2
12 November 2017
Examples of drop caps with text aligned to the letter. Going crazy with a 20 line transformed drop cap.
A1 2 3 s has been spoken… . There is a way that seems right to man, but the end thereof is bad drop caps. This is text indented on a three line drop cap and it is the way that is right. The letter is balanced into the margin and the galley-text follows the letter path. The letter follows the rules explained here and are highlighted with a blue dotted outline.
The line indent inline blocks are outlined in gray and have a sequence number. This can only be seen in the A. There is one simple CSS that defines their positioning for all letters of any line-count.
You can change the default bodytext font from the selector box top right. This does not change the drop cap font (DejaVu Serif).
P 1 2 3 4 erhaps we need to see what four lines of drop caps looks like. This is fast and easy compared to five lines. The P is a little tricky in that the third line under the bowl may have an ascender that clashes with the cap if inserted too far. This naughtly insertion has been done deliberately here to show a basic difference in positioning when handling print and dynamic font sizes.
If you resize the font using the A+ and -A buttons at the top, as you can do in most eBook reading systems, you can see the effect of reflow.
Note that with these examples the drop cap does not change in height. Because of their large size, if they were allowed to scale they may become irritating and go off the page. The different text size flows past the drop cap in a reasonable manner but only the default size fits elegantly.
L1 2 3 4 5 et us talk about the five line drop cap "L". "L" is a very interesting letter. Perhaps the most interesting of all 26 when working with drop caps. It leaves a very big and ugly white gap as a stand-alone drop cap with no text in the vacuum. This font-face has large serifs so is probably a bad choice for drop caps based on this letter alone. The text would look better if line 4 was able to align with lines 2 and 3.
K1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 EEPING the drop cap story going here is a digital content 20 line drop cap sized and positioned using em units. It has a little colour and a drop shadow applied because we can. The outlines clearly show the spacing grid and letter outline so the effect can be understood.
The default font-size: 1em; of the galley text is important as everything is linked to that. Using relative units means the text size can be changed and everything changes but the layout isn't lost. You can see this in a browser using the font-size increase/decrease tools.
The text is positioned around the drop cap by a number of spans floated left and adjusted to the line height (1.4em in this example). In 2017 this could possibly be done effectively using the grid property but the HTML size would not be significantly reduced.
A trick with manipulating a drop cap with such a large font-size: 41.55em; is that all em units referencing the drop cap for moving and positioning are very small. This is because they are always relative to the letter. For example the line-height is 0.66em and it was positioned left: -0.585em. This drop cap also has a transform: scale(); applied to narrow the character width. This was as much a part of the experiment as a design decision but does demonstrate that some crazy things could be done to a drop cap if someone had the time and inclination.
Summary
We did the five line inserted drop caps in 2011 for a significant trade publisher that insisted on this design feature. It was a challenge back then and probably still is to get the line start spacers working consistently across browsers/rendering engines.
Although drop caps can be done, to make them a significant feature in digital book content for delivery to EPUB readers is probably a no-no unless you have control over the targeted platforms.
That's drop caps on our blog for 2017. This is an iteration of the approach Infogrid Pacific designed when Firefox was hovering around version 4.x in 2011 and Chrome was still trying to customize the web.
All the "drop cap power" is built right into IGP:Digital Publisher (with a lot of other tools of course!)
Contact us for more information and a demonstration of IGP:Digital Publisher for a powerful Digitize Once, Use Forever, publishing strategy.
Posted by: Text-Richard Pipe. Javascript-Milan Bishwakarma