Priorities for CSS from the Digital Publishing Interest Group

Editor’s Draft,

This version:
http://w3c.github.io/dpub-pagination/priorities.html
Latest version:
http://www.w3.org/TR/dpub-css-priorities/
Feedback:
public-digipub@w3.org with subject line “[dpub-css-priorities] … message topic …” (archives)
Issue Tracking:
GitHub
Editor:
(Hachette Livre)

Abstract

This document documents CSS features needed by the digital publishing community, as determined by the W3C Digital Publishing Interest Group.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This document is an Editor’s Draft.

Publication as a Editor’s Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

The (archived) public mailing list public-digipub@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “dpub-css-priorities” in the subject, preferably like this: “[dpub-css-priorities] …summary of comment…

This document was produced by the Digital Publishing Interest Group (part of the Digital Publishing Activity).

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 1 August 2014 W3C Process Document.

Table of Contents

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.

Feature Priority Spec, Status Implemented Not Implemented Polyfill?
Hyphens 5 [css3text], LC Firefox, IE, Opera, Safari, Prince, AH Chrome (Implementation in progress Yes
Regions 5 [css-regions-1], WD IE, Safari Chrome, Firefox, Opera Prince, AH Yes
Ruby Styling 4 [css-ruby-1], WD Firefox, partial support in Chrome, IE, Safari, Opera unknown Yes
Emphasis Marks 4 [css3-text-decor], CR Safari, partial support in Chrome and Opera Firefox, IE

2.2. Features requiring specification

Note: these features require further specification work

Feature Priority Spec, Status Implemented Not Implemented Polyfill?
Character-based alignment in tables 5 [css4-text], ED Chrome, Firefox, IE, Opera, Safari, Prince, AH
Cross-references 5 [css3-content], ED Prince, AH Chrome, Firefox, IE, Opera, Safari Yes
text-spacing 4 [css4-text], unofficial draft
Line grid 3 [css3-line-grid], WD
Initial-letter 3 [css-inline-3], WD Safari Chrome, Firefox, IE, Opera, Prince, AH
Hanging punctuation 3 [css3-text], WD Safari, AH Chrome, Firefox, IE, Opera, Prince

2.3. Features requiring design

Note: these features require design work.

Feature Priority Spec, Status Implemented Not Implemented Note
Pagination 11 [css3-display], [css3-break], [css-overflow-3], [css3-page], [css3-content], [css3-gcpm], [css-page-floats], [css3-page-template], [css-regions-1] Prince, AH, Opera 12.16 (Presto) Chrome, Firefox, IE, Current Opera, Safari Yes
Mathematics 5 Houdini? Varies Varies MathJax
Shrink-to-fit image container 5 not specced Chrome, Firefox, IE, Opera, Safari, AH, Prince
Controlling hyphenation 4 Some properties in [css4-text], ED AH, Prince Chrome, Firefox, IE, Opera, Safari
Font Metric API 4 [houdini-font-metrics-1] none Chrome, Firefox, Safari, IE, Opera, Prince, AH
Tables of contents and indexes 3 Unspecified AH Chrome, Firefox, IE, Opera, Safari, Prince

2.4. Completed Features

Feature Priority Spec, Status Implemented Not Implemented Polyfill?
Vertical text 5 [css3-writing-modes], CR Chrome, IE, Edge, Opera, Safari, AH, Firefox
Open Type Font Variants 5 [css3-fonts], CR Firefox, IE, Chrome, Opera, Prince, AH, Safari No

2.5. Rejected Features

Feature Priority Spec, Status Implemented Not Implemented Polyfill?
Content property on elements 4 [css3-content], ED Prince, AH Chrome, Firefox, IE, Opera, Safari

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

Can be polyfilled by subsetting fonts, but this is not viable in a production environment.

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.

  • https://github.com/mnater/hyphenator

  • https://github.com/bramstein/Hypher

Some polyfills may pollute the source document with discretionary hyphens, causing difficulty for search and other functions.

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.

Name:hyphenate-patterns
Value:none | url(patterns-url)
Initial:none
Applies to:all elements
Inherited:yes
Percentages:n/a
Media:visual
Computed value:as specified
Animatable:no
.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
Name:min-length-of-last-line
Value:<length>
Initial:1
Applies to:all elements
Inherited:yes
Percentages:n/a
Media:visual
Computed value:as specified
Animatable:no

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?

CSS stylesheet polyfill for Ruby

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.

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.

Name: fit-to-page
Value: none | fit
Initial: none
Applies to: all elements
Inherited: yes
Percentages: n/a
Media: visual
Computed value: as specified
Animatable: no

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.

[HTML5] and EPUB 3 accessibility guides recommend using the hr element to indicate thematic breaks in narrative content (sometimes called "space breaks" in the publishing industry. But these breaks are often designed as an ornament or image, rather than any sort of horizontal line. We would like to do
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

This should be formatted as:

1, 3, 7–10, 16

with duplicates removed and consecutive numbers replaced by ranges.

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

Name: merge-sequential-page-numbers
Value: merge | leave-separate
Initial: merge
Applies to: all elements
Inherited: yes
Percentages: n/a
Media: visual
Computed value: as specified
Animatable: no

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 }

Result:

|   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

CSS Regions Polyfill by François Remy

9.2. Line grid

implementation status unknown

10. Accessibility

Accessibility of generated content

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

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-CONTENT-3]
CSS Generated Content Module Level 3 URL: https://drafts.csswg.org/css-content-3/
[CSS-FONTS-3]
John Daggett. CSS Fonts Module Level 3. 3 October 2013. CR. URL: http://www.w3.org/TR/css-fonts-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. 10 October 2013. LCWD. URL: http://www.w3.org/TR/css-text-3/
[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

[CSS21]
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
[CSS3-DISPLAY]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 21 July 2015. WD. URL: http://www.w3.org/TR/css-display-3/
[CSS3-LINE-GRID]
Elika Etemad; Koji Ishii; Alan Stearns. CSS Line Grid Module Level 1. 16 September 2014. WD. URL: http://www.w3.org/TR/css-line-grid-1/
[CSS3-PAGE-TEMPLATE]
Alan Stearns. CSS Pagination Templates Module Level 3. Proposal for a CSS module. URL: http://dev.w3.org/csswg/css3-page-template/
[CSS3-TEXT-DECOR]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 3. 1 August 2013. CR. URL: http://www.w3.org/TR/css-text-decor-3/
[CSS3TEXT]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. 10 October 2013. LCWD. URL: http://www.w3.org/TR/css-text-3/
[CSS-INLINE-3]
Dave Cramer; Elika Etemad; Steve Zilles. CSS Inline Layout Module Level 3. 17 September 2015. WD. URL: http://www.w3.org/TR/css-inline-3/
[CSS-OVERFLOW-3]
David Baron. CSS Overflow Module Level 3. 18 April 2013. WD. URL: http://www.w3.org/TR/css-overflow-3/
[CSS-PAGE-FLOATS]
Johannes Wilm. CSS Page Floats. ED. URL: http://dev.w3.org/csswg/css-page-floats/
[CSS-REGIONS-1]
Rossen Atanassov; Alan Stearns. CSS Regions Module Level 1. 9 October 2014. WD. URL: http://www.w3.org/TR/css-regions-1/
[CSS-RUBY-1]
Elika Etemad; Koji Ishii. CSS Ruby Layout Module Level 1. 5 August 2014. WD. URL: http://www.w3.org/TR/css-ruby-1/
[CSS3-BREAK]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 29 January 2015. WD. URL: http://www.w3.org/TR/css3-break/
[CSS3-CONTENT]
Ian Hickson. CSS3 Generated and Replaced Content Module. 14 May 2003. WD. URL: http://www.w3.org/TR/css3-content
[CSS3-FONTS]
John Daggett. CSS Fonts Module Level 3. 3 October 2013. CR. URL: http://www.w3.org/TR/css-fonts-3/
[CSS3-GCPM]
Dave Cramer. CSS Generated Content for Paged Media Module. 13 May 2014. WD. URL: http://www.w3.org/TR/css-gcpm-3/
[CSS3-PAGE]
Melinda Grant; et al. CSS Paged Media Module Level 3. 14 March 2013. WD. URL: http://www.w3.org/TR/css3-page/
[CSS3-TEXT]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. 10 October 2013. LCWD. URL: http://www.w3.org/TR/css-text-3/
[CSS3-WRITING-MODES]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 20 March 2014. CR. URL: http://www.w3.org/TR/css-writing-modes-3/
[CSS4-TEXT]
fantasai; Koji Ishii; Alan Stearns. CSS Text Module Level 4. ED. URL: http://dev.w3.org/csswg/css-text-4/
[DPUB-LATINREQ]
Dave Cramer. Requirements for Latin Text Layout and Pagination. 30 September 2014. WD. URL: http://www.w3.org/TR/dpub-latinreq/
[HOUDINI-FONT-METRICS-1]
Stephen Zilles; Alan Stearns; Chris Lilley. Font Metrics API Level 1. ED. URL: http://dev.w3.org/houdini/font-metrics-api/
[HTML5]
Ian Hickson; et al. HTML5. 28 October 2014. REC. URL: http://www.w3.org/TR/html5/
[JLREQ]
Yasuhiro Anan; et al. Requirements for Japanese Text Layout. 3 April 2012. NOTE. URL: http://www.w3.org/TR/jlreq/
[XSLFO20]
Dave Pawson. Extensible Stylesheet Language (XSL) Version 2.0. 17 January 2012. WD. URL: http://www.w3.org/TR/xslfo20/

Property Index

Name Value Initial Applies to Inh. %ages Media Animatable Computed value
hyphenate-patterns none | url(patterns-url) none all elements yes n/a visual no as specified
min-length-of-last-line <length> 1 all elements yes n/a visual no as specified
fit-to-page none | fit none all elements yes n/a visual no as specified
merge-sequential-page-numbers merge | leave-separate merge all elements yes n/a visual no as specified

Issues Index

Get more input on priorities.
Research support for these properties.
Defined in [css4-text] which is not yet an official spec.
implemented only by Prince and AH.
Defined in [css4-text] which is not yet an official spec.
implemented only by Prince and AH
Not in a CSS spec
implemented only by PrinceXML
Not in a CSS spec
Not implemented
Not in a CSS spec
Not implemented
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.
is the Ruby CSS spec stable?
[css4-text] is not yet an official spec
implementation status unknown
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.
at risk in [css3-text]
Implemented in Safari, but no other browser. Many questions remain on details.
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.
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?
target-counter() is not implemented in browsers
target-counters() is not implemented in browsers
target-text() is not implemented in browsers
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.
Do authors need to choose the joining character (en-dash in this case)?
Not in a CSS spec.
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)?
design a mechanism for this feature.
Are CSS counters adequate to the task?
only partial support in Gecko and WebKit
unsupported in Blink, Trident/Edge
Defined in [css4-text] which is not yet an official spec.
not implemented in Chrome, Firefox, and Opera
implementation status unknown
Accessibility of generated content