Drop-Cap Fun 3. New CSS Toys

@DauWhe (sometimes known as Dave Cramer) mentioned on Twitter the Initial Letter specification that is currently being written in the CSS Inline Layout Module Level 3 - 9 Nov 17. (Draft. Not the final thing.)

My sample drop caps at the start of this article shows a two line drop cap followed by a four line drop cap. Match that W3C!

The Inline Layout specification further highlights the details required to handle drop, raised, sunken, margin and hanging caps. It ain't simple. It becomes more complex when handling the requirements of all languages many of which have their own alignment rules.

The draft Module spells out in detail the tricky calculation of the drop cap font size outlined in the first article in this series. My approach was to use the font on a graph and do a simple cap-height estimated calculation to get the font-height for the drop-cap font. Of course the W3C has to do the full  mathematics to make this happen at rendering time. Here is their equation where N is the number of lines.

This equation is made using the standard arithmetic tagging patterns built into IGP:FoundationXHTML.

It looks like we need a CSS unit cap! We have ex (the height of the x character or half of 1em). 

Initial Letter

To make initial-letter work in all languages there are a lot of issues with baseline properties to handle positioning for specific language written forms. The proposed property has two values and looks like this:

p {initial-letter: number integer;}

Number is the height of letter in line counts. It can't be less than one.

Integer is optional and the number of lines the drop-cap sinks.

It can also be normal, indicating no decoration is to be applied.

There is also a supporting property:

initial-letter-align: alphabetic | ideographic | hebrew | hanging | border-box

This is designed to handle vertical alignment for different languages and address their specific alignment requirements.

There is also a proposed property to wrap text around the shape of the initial-letter glyph. However this is "at risk" in the draft at present so we need to wait on this one.

initial-letter-wrap: none | first;

There are excellent illustrated examples of all of these in the draft document.

Inline Styles in CSS

There are a number of pseudo elements and styles that can be applied to content by position available. For example:

::before  ::after  ::first-letter  ::first-line ::selection

and of course pseudo classes. Some examples:

:first-child  :first-of-type  :last-child  :last-of-type  :nth-child()  :root  :lang()

These are great for websites and final delivered content. The downside of some of these in digital book production is they remove direct HTML semantics. In this multi-format world not every package of a book may require a decorative initial-letter.

IGP:Digital Publisher stores highly semantically tagged XHTML. It also has options for print and digital package content variants. This information is used by the IGP:Long Running Process Engine to create multiple different delivery packages.

For example currently a drop cap would be tagged in the XHTML. If it was not required in a format package the processor would simply remove the tag in the  package XHTML. Eg:

<p><span class="dropcap-3lines-rw">H</span>ere is a tagged drop cap....</p>

In the final output package simply becomes:

<p>Here is a tagged drop cap....</p>

It could also be processed to a different line-count or more simple styling for the older readers out there.

The value of the semantic tagging approach is future-proofing the content. With the presentation styling abstracted to the CSS this means the styling is effectively "hard-coded" and a processor may have problems finding it in the CSS. This creates a lot of potential problems.

What we will probably do, if and when this becomes a thing, is to apply a class statement to the first paragraph that can be processed in or out. Eg:

<p class="dropcap-4lines-rw">Here is a tagged drop cap....</p>

With the CSS:

p.dropcap-4lines-rw::first-letter {
    initial-letter: 4 4;
    initial-letter-align: alphabetic;}

Or whatever the CSS will be when it becomes a real thing. Assuming this all works the older documents that have the span will be able to be easily processed to the new styling. This preserves the value of the historical FX for future requirements without any modifications being required.

Summary

The new CSS3 modules that are being authored are addressing a lot of detailed presentation and decorative items. It's all good stuff and a lot of it is targeted at print production presentation quality moving forward.

There will be a number of challenges moving forward now that CSS has become the 800lb gorilla in HTML land. We live in interesting times.

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. Bring it on W3C!

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

Drop-Cap Fun 1

Drop-Cap Fun 2

IGP:Digital Publisher information Page

IGP:FoundationXHTML inline class list