Set up the CSS to convert to PDF using Prince XML.

* Finished out the margin boxes to put the document number and current section
  in the right corners.
* Adjusted font sizes and spacing to better match the C++ standard.
* Switched to using <h1> to define section titles and <header> to style them,
  for better control over PDF bookmarks.
* Generated page numbers in the table of contents when printing.
* Lined up the markers better in the table of contents.
* Changed how styles are transferred to the standalone document, so that styles
  the browser doesn't understand are preserved.
* Fixed some formatting in the Normative References section.

Author: jyasskin

README.md

@@ -54,10 +54,9 @@ Custom C++-specific elements
 
 These automatically number clauses and sections, fill in
 table-of-contents data, and allow cross-linking. `<cxx-clause>` is for
-top-level sections, while `<cxx-section>` can be nested
-arbitrarily. The title of the section is given in either the `title`
-attribute or a nested `<cxx-title>` element. The `id` attribute is
-used for cross-linking.
+top-level sections, while `<cxx-section>` can be nested arbitrarily.
+The title of the section is given in a nested `<h1>` element.
+The `id` attribute is used for cross-linking.
 
 ### `<cxx-titlepage>`
 

base.css

@@ -1,37 +1,60 @@
 @page {
     margin: 10%;
-    @top-left { content: "© ISO/IEC"; }
-    @bottom-right { content: counter(page); }
+    @top-left { content: "© ISO/IEC"; font-size: 10pt; }
+    @top-right { content: string(docnum); font-weight: bold; font-size: 10pt; }
+    @bottom-left { content: string(current-section, last); font-size: 10pt; }
+    @bottom-right { content: counter(page); font-size: 10pt; }
 }
+cxx-titlepage { page: title; page-break-after: always; }
 @page title {
-    @top-left { content: normal; }
+    @top-left { content: "© ISO 2014 — All rights reserved"; }
+    @top-right { content: normal; }
+    @bottom-left { content: normal; }
     @bottom-right { content: normal; }
 }
 
 @media screen {
-    body { max-width: 7in; }
+    body { max-width: 7in;
+           /* Make room for paragraph numbers. */
+           margin-left: 2em }
 }
 
 @media print {
-    /* Current PDF output from browsers doesn't preserve links, so avoid
-       the affordance that says the text is a link. */
-    a[href] { color:black; text-decoration:none; }
+    html { font-size: 10pt; }
+    pre,code { font-size: 8pt; }
+    /* Note that only Prince generates clickable links. */
+    a[href] { text-decoration:none; }
 }
 
 /* Needed to make the <cxx-titlepage>'s vertical spacing work. */
 html, body {height: 100%}
-body { margin-left: 1.5em }
 
-cxx-clause ^ h1 { font-size: 150%; }
+cxx-docnum { string-set: docnum content(); }
+
+cxx-clause { page-break-before: always; }
+@media screen {
+    cxx-clause, cxx-toc { margin-top: 3em; }
+}
+
+cxx-clause ^ header { font-size: 150%; }
 cxx-toc ^ h1 { font-size: 150%; }
-cxx-clause cxx-section ^ h1 { font-size: 117% }
-cxx-clause cxx-section cxx-section ^ h1 { font-size: 100% }
+cxx-clause cxx-section ^ header { font-size: 117%; }
+cxx-clause cxx-section cxx-section ^ header { font-size: 100%; }
+
+[data-bookmark-label] { bookmark-label: attr(data-bookmark-label); }
+h1 { bookmark-level: 1; }
+cxx-toc ^ h1 { bookmark-level: 2; }
+cxx-clause h1 { bookmark-level: 2; }
+cxx-clause cxx-section h1 { bookmark-level: 3; }
+cxx-clause cxx-section cxx-section h1 { bookmark-level: 4; }
+
+* ^ .section-number { string-set: current-section "§ " content(); }
 
 p {margin-top: .5em; margin-bottom: .5em}
 p:first-child, ul, ol {margin-top: 0}
 
 [para_num]::before { content: attr(para_num); float: left;
-                     font-size: 60%; margin-left: -2em; width: 1.5em; text-align: right; }
+                     font-size: 70%; margin-left: -2.5em; width: 1.5em; text-align: right; }
 
 aside { float: right; max-width: 40%;
         margin: 1ex;
@@ -43,7 +66,10 @@ ins {text-decoration: underline; color: #005100;}
 
 pre { margin-left: 1em; }
 
-cxx-clause { page-break-before: always; }
-@media not paged {
-    cxx-clause, cxx-toc { margin-top: 3em; }
+/* This is here rather than inside elements/toc.html because browsers
+   don't understand leader() or target-counter(), so they drop them
+   inside the CSSOM. */
+@media print {
+    /* Generate page numbers in the table of contents. */
+    cxx-toc ^ a[href]::after { content: leader(" . ") target-counter(attr(href), page); }
 }

elements/clause.html

@@ -3,9 +3,9 @@
     (function() {
       var clause_num = 1;
       Polymer('cxx-clause', {
-        created: function() {
+        ready: function() {
           this.update_sec_nums(clause_num++);
-          CxxSectionElement.prototype.created.apply(this);
+          CxxSectionElement.prototype.ready.apply(this);
         },
       });
     })();

elements/function.html

@@ -27,7 +27,7 @@
   <template>
     <style>
       :host {display:block; margin-top: .5em; margin-bottom: .5em;}
-      dt { float: left; font-style: italic; padding-right: 1ex;}
+      dt { float: left; font-style: italic; font-weight: normal; padding-right: 1ex;}
       dd { margin-left: 0em; }
       /* @polyfill dd > ul, dd > ol */
       ::content > ul, ::content > ol { clear: left; }

elements/publish.js

@@ -28,6 +28,23 @@
         return document.createComment(scriptComment);
     }
 
+    function fetch(url) {
+        return new Promise(function(resolve, reject) {
+            var request = new XMLHttpRequest();
+            request.onload = function() {
+                resolve(this.responseText);
+            }
+            request.onerror = function() {
+                reject(this);
+            }
+            request.onabort = function() {
+                reject(this);
+            }
+            request.open('GET', url);
+            request.send();
+        });
+    }
+
     function cloneStaticAndInline(doc) {
         var copy = doc.cloneNode(true);
         function removeAll(nodes) {
@@ -40,39 +57,51 @@
         removeAll(copy.querySelectorAll('cxx-publish-button'));
 
         // Inline all style sheets.
-        removeAll(copy.querySelectorAll('style'));
-        removeAll(copy.querySelectorAll('link'));
-        var allStyles = '';
-        forEach(doc.styleSheets,
-                function(sheet) {
+        var sheetUpdates = Array.prototype.map.call(
+            copy.querySelectorAll('link[rel="stylesheet"]'),
+            function(extSheet) {
+                return fetch(extSheet.href).catch(function(error) {
+                    console.warning('Could not fetch', extSheet.href,
+                                    'falling back to stylesheet contents.',
+                                    error);
+                    var styleText = '';
+                    var sheet = extSheet.sheet;
                     if (!sheet.disabled) {
                         forEach(sheet.cssRules, function(rule) {
-                            allStyles += rule.cssText;
+                            styleText += rule.cssText;
                         });
                     }
+                    return styleText;
+                }).then(function(styleText) {
+                    var inlinedStyle = copy.createElement('style');
+                    inlinedStyle.textContent = styleText;
+                    extSheet.parentNode.insertBefore(inlinedStyle, extSheet);
+                    extSheet.parentNode.removeChild(extSheet);
                 });
-        var allStylesElem = copy.createElement('style');
-        allStylesElem.textContent = allStyles;
-        copy.head.appendChild(allStylesElem);
+            });
 
         copy.head.insertBefore(declareCustomTagNamesForIE8(),
                                copy.head.firstElementChild);
 
-        return copy;
+        return Promise.all(sheetUpdates).then(function() {
+            return copy;
+        });
     }
 
     Polymer('cxx-publish-button', {
         publish: function() {
-            var copy = cloneStaticAndInline(document);
+            var copyPromise = cloneStaticAndInline(document);
             var source = '';
             if (this.source) {
                 var source = '<!-- Sources at ' + this.source + ' -->\n';
             }
-            var published = new Blob(['<!DOCTYPE html>\n',
-                                      source,
-                                      copy.documentElement.outerHTML],
-                                     {type: 'text/html'});
-            window.open(URL.createObjectURL(published), '_blank');
+            copyPromise.then(function(copy) {
+                var published = new Blob(['<!DOCTYPE html>\n',
+                                          source,
+                                          copy.documentElement.outerHTML],
+                                         {type: 'text/html'});
+                window.open(URL.createObjectURL(published), '_blank');
+            });
         }
     });
 })();

elements/ref.html

@@ -16,7 +16,7 @@
                  ><template if="{{in_elem.index}}">{{in_elem.name}} &#xa7;{{in_elem.index[to]}}</template
                  ><template if="{{!in}}"><a href="#{{to}}">{{to_elem.sec_num}}</a></template
       ></template
-      ><template if="{{insynopsis}}">// <i><template bind="" ref="target_num"></template>, {{to_elem.text_title}}</i></template
+      ><template if="{{insynopsis}}">// <i><template bind="" ref="target_num"></template>, {{to_elem.title_element.textContent}}</i></template
       ><template if="{{!insynopsis}}">(<template bind="" ref="target_num"></template>)</template
   ></template>
   <script src="ref.js"></script>

elements/section.html

@@ -2,22 +2,22 @@
     Recognizes attributes 'id' and 'title', but marking these as attributes
     cause problems for the ShadowDOM polyfill.
 -->
-<polymer-element name="cxx-section" constructor="CxxSectionElement" attributes="">
+<polymer-element name="cxx-section" constructor="CxxSectionElement">
   <template>
     <style>
       :host { display: block; }
       :host:target {background-color: inherit;}
       :host:target > section > h1 {background-color: #fed;}
-      h1::after { clear:both; display: block; content: " "; height: 0 }
+      /* @polyfill header > h1 */
+      ::content h1 { display: inline; font-size: 100%; }
+      header { font-weight: bold; margin-top: 20px; margin-bottom: 20px; }
+      header::after { clear:both; display: block; content: " "; height: 0 }
     </style>
 
     <section>
-      <h1>{{sec_num}} {{title}}<content select="cxx-title"></content> <span style="float:right"><a href="#{{id}}">[{{id}}]</a></span></h1>
+      <header><span class="section-number">{{sec_num}}</span> <content select="h1"></content> <span style="float:right"><a href="#{{id}}">[{{id}}]</a></span></header>
       <content></content>
     </section>
   </template>
   <script src="section.js"></script>
 </polymer-element>
-<polymer-element name="cxx-title" noscript>
-  <template><content></content></template>
-</polymer-element>

elements/section.js

@@ -2,8 +2,6 @@
     Polymer('cxx-section', {
         // String section number, like "17.2.3". 1-based.
         sec_num: "?",
-        text_title: "",
-        title_element: null,
 
         applyAuthorStyles: true,
 
@@ -18,19 +16,18 @@
             }
         },
 
-        created: function() {
-            var title_element = this.querySelector('cxx-title');
-            if (title_element && title_element.parentElement != this)
-                title_element = null;
-            if (title_element && this.title)
-                console.warn(this, 'has two titles');
-            if (!title_element && !this.title)
-                console.warn(this, 'has no title');
-            this.text_title = this.title;
-            if (title_element) {
-                this.title_element = title_element;
-                this.text_title = title_element.textContent;
+        sec_numChanged: function() {
+            if (this.title_element) {
+                this.title_element.setAttribute(
+                    'data-bookmark-label',
+                    this.sec_num + ' ' + this.title_element.textContent);
             }
+        },
+
+        ready: function() {
+            var title_element = this.querySelector('h1');
+            if (title_element && title_element.parentElement == this)
+                this.title_element = title_element;
 
             this.numberParagraphChildren();
         },

elements/titlepage.html

@@ -10,7 +10,7 @@
 <polymer-element name="cxx-titlepage" attributes="stage">
   <template>
     <style>
-      :host { display: block; page: 'title'; page-break-after: always; min-height: 100%; }
+      :host { display: block; min-height: 100%; }
 
       /* position:relative on :host makes position:absolute on its children work
          relative to :host's bounds. */

elements/toc.html

@@ -4,24 +4,28 @@
   <template>
     <style>
       :host { display: block; }
+      nav > ol { font-weight: bold; }
+      ol { font-weight: normal; padding-left: 0; margin-left: 0; }
+
+      /* Browsers don't support ::marker or display:marker, so emulate it. */
       li { list-style-type: none; }
-      ol { font-weight: normal; }
-      nav > ol { padding-left: 0; font-weight: bold; }
-      .marker { margin-right: 1em; }
+      .marker { display: inline-block; }
 
-      /* Enable when custom markers are supported:
-       * http://www.w3.org/TR/css3-lists/#marker-pseudoelement
-       * li { list-style-type: inline; }
-       * .marker { display: marker; }
-       */
+      li .marker { width: 2em; text-align: left; }
+      ol ol { margin-left: 2em; }
+      li li .marker { width: 3em; }
+      ol ol ol { margin-left: 3em; }
+      li li li .marker { width: 3.5em; }
+      ol ol ol ol { margin-left: 3.5em; }
+      li li li li .marker { width: 4.5em; }
     </style>
     <nav>
       <h1>Contents</h1>
       <template bind="" id="hierarchy">
         <template if="{{sections.length > 0}}">
           <ol>
             <template repeat="{{sections}}">
-              <li><a href="#{{elem.id}}"><span class="marker">{{elem.sec_num}}</span>{{elem.text_title}}</a><template bind="" ref="hierarchy"
+              <li><span class="marker">{{elem.sec_num}}</span><a href="#{{elem.id}}">{{title.textContent}}</a><template bind="" ref="hierarchy"
               ></template></li>
             </template>
           </ol>

elements/toc.js

@@ -13,7 +13,9 @@
                     continue;
                 sections.push(this.collectSections(child));
             }
-            return {elem: root, sections: sections};
+            return {elem: root,
+                    title: root.querySelector('h1'),
+                    sections: sections};
         },
 
         created: function() {