Wrapping Around Initial Letters

A Collection of Interesting Ideas,

This version:
http://dauwhe.github.io/css-inline/
Issue Tracking:
Inline In Spec
Editor:
(Hachette Livre)

Abstract

The CSS formatting model provides for a flow of elements and text inside of a container to be wrapped into lines. The formatting of elements and text within a line, its positioning in the inline progression direction, and the breaking of lines are described in [CSS3TEXT]. This module describes the positioning in the block progression direction both of elements and text within lines and of the lines themselves. This positioning is often relative to a baseline. It also describes special features for formatting of first lines and drop caps. It extends on the model in [CSS2].

Table of Contents

Introduction

At the Sydney F2F we resolved to add full kerning around initial letters. I’ve attempted to describe a procedure for doing so.

1. Initial Letter Wrapping

should this all be defined in terms of shape-outside instead?

Name: initial-letter-wrap
Value: none | auto | first-line
Initial: none
Applies to: ::first-letter pseudo-elements and inline-level first child of a block container
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no
none
No wrapping is performed.
auto
For each line of text impacted by the initial letter, the line box adjacent to the intial letter starts at the left-most point that touches the ink of the initial letter, plus a fixed amount of offset.

How much offset? Based on the right side-bearing of the initial letter? That could be a problem as it’s sometimes negative (see Zapfino).

first-line
As auto, but wrapping only performed on the first line of the block containing the initial letter.

Rewrite for logical directions.

Bikeshed value names.

Do we need anything else for scripts where this behavior is undesirable? Or is default "none" sufficient?

Note: If the next character after the initial letter is a whitespace character, auto and first-line compute to none, in order to avoid the initial letter appearing to be part of the subsequent word.

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: none;
}

regular dropcap A

Ordinary initial letter with no wrapping.

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: auto;
}

text wrapping around dropcap A

Text follows shape of initial letter. Each line box should just touch the ink of the letter, with some offset (represented by the shaded box).

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: first-line;
}

text wrapping around dropcap A but only on first line

Only first line is moved up against the ink of the initial letter.

text wrapping around dropcap V

text wrapping around dropcap P

text wrapping around dropcap W

What should happen with initial letters that are concave on the (right) side? Wrapping the middle line in a three-line initial "K" can look very strange.

Conformance

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 11 June 2015. CR. URL: http://www.w3.org/TR/css-values/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119

Informative References

[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: http://www.w3.org/TR/CSS2
[CSS3TEXT]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. 10 October 2013. LCWD. URL: http://www.w3.org/TR/css-text-3/

Property Index

Name Value Initial Applies to Inh. %ages Media Animatable Computed value
initial-letter-wrap none | auto | first-line none ::first-letter pseudo-elements and inline-level first child of a block container no N/A visual no as specified

Issues Index

should this all be defined in terms of shape-outside instead?
How much offset? Based on the right side-bearing of the initial letter? That could be a problem as it’s sometimes negative (see Zapfino).
Rewrite for logical directions.
Bikeshed value names.
Do we need anything else for scripts where this behavior is undesirable? Or is default "none" sufficient?
What should happen with initial letters that are concave on the (right) side? Wrapping the middle line in a three-line initial "K" can look very strange.