Priorities for CSS from the Digital Publishing Interest Group

1. Introduction

As publishing moves to the Open Web Platform (OWP), we hope to expand upon the range of content we are able to publish with web technologies. How content is displayed is of critical importance to how it is understood, and so we ask much of CSS. This document aims to describe our highest priorities for entirely new CSS features, implementation of CSS features that have already been specified, and even some cases where work may need to be done beyond the scope of CSS.

Note: Many of the features described here are documented in various requirements documents written by the W3C, such as [jlreq] and [dpub-latinreq]. A complete list of such documents can be found here.

2. List of Priorities

Priorities are listed on a scale of 1 to 5, with 5 being the highest priority. Priorities were determined in a somewhat arbitrary manner by the editor, with feedback from some members of the interest group. Input from anyone involved in digital publishing is welcome.

Get more input on priorities.

2.1. Features requiring implementation

Note: these features are relatively mature, and have been implemented in more than one browser, but will not be widely useful until implemented in all browsers.

2.2. Features requiring specification

Note: these features require further specification work

2.3. Features requiring design

Note: these features require design work.

2.4. Completed Features

2.5. Rejected Features

Note: The CSSWG resolved to allow replaced content via the content property on elements, but not to allow textual content on elements. It will remain restricted to pseudo-elements.

3. Typography and Fonts

3.1. Fonts

Good typography depends on accessing the many powerful features in OpenType fonts.

3.1.1. font-feature-settings

Note: font-variant-* is the preferred method for accessing OpenType features.

Note: Now supported in Safari

3.1.2. Font feature properties

The font feature properties are the preferred method for accessing OpenType features.

1. font-kerning

2. font-variant-ligatures

3. font-variant-position

4. font-variant-caps

5. font-variant-numeric

6. font-variant-alternates

7. @font-feature-value

Research support for these properties.

3.1.3. Font Metric API

3.2. Hyphenation

3.2.1. The hyphens property

Hyphenation is critical for justified text. Most browsers now support the hyphens property.

Note: hyphens property is being implemented in Chrome.

3.2.2. Hyphenation parameters

3.2.2.1. hyphenate-limit-chars

This property specifies three different things:

1. the shortest word that can be hyphenated.

2. the minimum number of letters in a word that may be left at the end of a line when the word is hyphenated.

3. the minimum number of letters in a word that may be moved to the next line when the word is hyphenated.

Note: The second parameter is called hyphenation-remain-character-count in [XSLFO20], and hyphenate-after in Prince. The third parameter is called hyphenation-push-character-count in [XSLFO20], and hyphenate-before in Prince.

Defined in [css4-text] which is not yet an official spec.

implemented only by Prince and AH.

3.2.2.2. hyphenate-limit-lines

This property specifies the maximum number of consecutive lines that may end with a hyphenated word.

Note: Called hyphenate-limit in Prince

Defined in [css4-text] which is not yet an official spec.

implemented only by Prince and AH

3.2.2.3. Hyphenation dictionaries

Reference a hyphenation dictionary, formatted as TeX does.

.chill5i
.ch4il2
.chil1l
.1ci2
.cit5r
.2c1it
.co3e2
.1co
.co4r
.cor5n1er
.corn2e
.de4moi2
.d4em
.de1mo
.de3o
.de3r1a
.de3r1i
.de1s4c
.des2
.dic1t2io5
.3di2c1t
.do4t
.1do
.du4c
.1du
.du4m1b5
.earth5

Not in a CSS spec

implemented only by PrinceXML

3.2.2.4. Hyphenation exception list

Reference a hyphenation exception list, in a simple text format where hyphens show possible break points, and all other break points are forbidden:

En-gland
er-go-no-mic
exo-skel-e-ton
Feb-ruary
George-town
grand-children
inter-office
Ir-ving
Kabba-list

Note: Called hyphenation-exceptions in [XSLFO20]

Not in a CSS spec

Not implemented

3.2.2.5. min-length-of-last-line

Note: This property is from [XSLFO20]

Not in a CSS spec

Not implemented

3.3. East Asian Language Support

3.3.1. Emphasis Marks

not supported in Firefox. Bug to implement unassigned.

not supported in IE.

partial support in Chrome and Opera; don’t support left and right values of -webkit-text-emphasis-position.

3.3.2. Ruby

Note: W3C has created a very useful test suite with results for Ruby markup.

Note: See http://w3c.github.io/typography/#ruby_annotation for more information on Ruby requirements.

is the Ruby CSS spec stable?

3.3.3. text-spacing

[css4-text] is not yet an official spec

implementation status unknown

3.4. initial-letter

Shipped in Safari in Fall 2015, but not yet implemented in other browsers (although there are some signs of interest).

some spec work still required for i18n.

3.5. Hanging punctuation

at risk in [css3-text]

Implemented in Safari, but no other browser. Many questions remain on details.

4. Pagination

4.1. Foundations

Pagination is a complex subject, involving many different features and specifications.

• [css3-display] defines the box tree and box fragments.

• [css3-break] defines how to break content across containers such as boxes.

• [css-overflow-3] describes the basic behavior of content that doesn’t fit onto a single display surface.

• [css3-page] defines the page model, page geometry and margin boxes.

• [css3-content] defines how to populate page margin boxes.

• [css3-gcpm] defines how to create footnotes and sidenotes.

• [css-page-floats] defines how to float images or other elements to the top or bottom of pages.

• [css3-page-template] describes a method to create boxes in CSS, which then can be used to receive content via [css-regions-1] or [css3-content].

How will Project Houdini fit into all of this?

Is there a role for [css-regions-1] in defining pagination?

A significant number of people consider the page margin boxes as defined by [css3-page] to be inadequate. [css3-page-template] describes a potential alternative.

Note: Webkit has implemented overflow: -webkit-paged-x. In conjunction with scroll snapping this can provide a very nice paginated experience.

4.2. APIs

See https://www.w3.org/dpub/IG/wiki/Functional_Requirements_for_Pagination#Interacting_with_Pages

4.3. Page transitions

4.4. Scaling content to fit a page

An extremely common design pattern is to have an image with caption that should be displayed on a single page. The user agent would be able to scale the image until both the image and its caption would fit on a single page.

Design this feature.

Not in any CSS spec.

Aspect ratio of any images must be preserved.

It should be possible to apply this to a group of images and captions

Would we need to describe the minimum font size allowed for text in a shrink container?

5. Generated Content and Cross-References

Many publication elements, such as figures, tables, and even chapters, can be automatically numbered or labelled. We need to be able to both display those labels and reference them from elsewhere in the document (see Figure 1.3).

[css3-content]] describes functions for referencing the values of counters and text.

5.1. Cross-References

5.1.1. The target-counter() function

target-counter() is not implemented in browsers

5.1.2. The target-counters() function

target-counters() is not implemented in browsers

5.1.3. The target-text() function

target-text() is not implemented in browsers

5.2. Generated content

In [css21], generated content is restricted to pseudo-elements. PDF formatters like Prince allow the content property on all elements. This has proved useful for many common use cases.

hr.ornament {
  font-family: 'Poetica Std';
  content: '•';
  font-feature-settings: "ornm" 10;
}

Is this necessary? hr can be restyled by using content on hr::before and setting the border of the hr to none.

The CSSWG has resolved to allow only replaced generated content on elements. Textual generated content will be restricted to pseudo-elements.

6. Tables of contents and indexes

6.1. Indexes

Note: See http://barefootliam.blogspot.ca/2014/08/back-of-book-indexes-and-css.html

Many types of long-form documents contain indexes. CSS does not currently have a way of formatting a list of index terms that has been generated by some other process, such as XSL.

<body role="index">
    <h2>Simplest index</h2>
    <ul role="index-entry-list">
      <li><span role="index-term">abbreviations</span>, 
        <a role="index-locator" href="...">52</a></li>
      <li><span role="index-term">accents</span>, 
        <a role="index-locator" href="...">20</a></li>
      <li><span role="index-term">blogs</span>, 
        <a role="index-locator" href="...">98</a></li>
      <li><span role="index-term">cold calling</span>, 
        <a role="index-locator" href="...">68</a></li>
      <li><span role="index-term">Facebook</span>, 
        <a role="index-locator" href="...">viii</a>, 
        <a role="index-locator" href="...">96</a></li>
      <li><span role="index-term">inversion</span>, 
        <a role="index-locator" href="...">53</a></li>
      <li><span role="index-term">Twitter</span>, 
        <a role="index-locator" href="...">37</a></li>
    </ul>
  </body>

6.1.1. Collapsing Page Ranges

When generating indexes or referring to page ranges, one often ends up with duplicated or sequential numbers.

1, 3, 3, 7, 8, 9, 10, 16

1, 3, 7–10, 16

Do authors need to choose the joining character (en-dash in this case)?

Not in a CSS spec.

Note: [XSLFO20] has a merge-sequential-page-numbers feature: http://www.w3.org/TR/xslfo20/#merge-sequential-page-numbers

7. Math

Browser support for mathematics is critical for educational, scientific, and technical publishing. In the absence of native high-quality cross-browser support for MathML, the community is focusing on ways of making polyfilling MathML easier and better. Some features that might help include:

1. Font metric APIs

2. Support for Open Type Math Tables

3. Custom Layout from Houdini

Is MathML the ultimate solution for math on the web? Could math display move closer to the SVG model of being more related to CSS (as with the FX Task Force)?

7.1. Aligning equations

Many publishers require that all equations on a page align on the equals sign.

    x + 3z = 7 + 2y
    
2x + y + z = 4

Intervening text which may
extend for several lines

   10 + 2y = 3x + 2z

design a mechanism for this feature.

math {
    text-align: "=" center;
}

7.2. Numbering equations

Are CSS counters adequate to the task?

7.3. OpenType Math Tables

This provides crucial technology for math layout (e.g., specifying glyph fragments for stretchy character constructions).

Note: see http://blogs.msdn.com/b/murrays/archive/2014/09/10/10520771.aspx and http://fontforge.github.io/math.html

only partial support in Gecko and WebKit

unsupported in Blink, Trident/Edge

8. Tables

8.1. Character-based alignment

td { text-align: "." center }

|   445.85  |
| 12345.6   |
|     1.234 |
|      .1   |

Defined in [css4-text] which is not yet an official spec.

9. Layout

9.1. Regions

not implemented in Chrome, Firefox, and Opera

9.2. Line grid

implementation status unknown

10. Accessibility

Accessibility of generated content

11. Changes since the Editor’s Draft of 30 August 2015

• font-feature-settings now supported in Safari

• CSSWG has resolved to not allow textual generated content on elements.

• Chrome is implementing the hyphens property.

• Hanging punctuation implemented in Safari.

• initial-letter shipped in Safari

• Vertical writing support shipped in Firefox

• Character alignment in tables now in official Editor’s Draft of CSS Text 4