GNOME.org
 

[yelp-xsl/wip/html5] Use semantic HTML5 sections and footers

commit 72db787c852c913e95d4e4a2302b885794c0b602
Author: Shaun McCance <shaunm redhat com>
Date:   Tue Oct 27 13:01:58 2015 -0400

    Use semantic HTML5 sections and footers

 xslt/common/html.xsl                   |   50 ++++++++++++++++----------------
 xslt/dita/html/dita2html-topic.xsl     |   16 +++++-----
 xslt/docbook/common/db-selectors.mod   |    2 +-
 xslt/docbook/html/db2html-division.xsl |   31 +++++++++++---------
 xslt/mallard/html/mal2html-page.xsl    |   15 ++++-----
 5 files changed, 58 insertions(+), 56 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 461f8cd..2bc6d1b 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -778,11 +778,11 @@ div.body {
   background-color: </xsl:text><xsl:value-of select="$color.background"/><xsl:text>;
   padding: 10px;
 }
-div.sect {
+section {
   margin-top: 2.4em;
   clear: both;
 }
-div.sect div.sect {
+section section {
   margin-top: 1.44em;
 }
 div.trails {
@@ -801,7 +801,7 @@ div.hgroup {
   margin: 0 0 0.5em 0;
   color: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
 }
-div.sect > div.inner > div.hgroup {
+section > div.inner > div.hgroup {
   margin-top: 0;
   border-bottom: solid 1px </xsl:text>
     <xsl:value-of select="$color.gray_border"/><xsl:text>;
@@ -810,7 +810,7 @@ div.sect > div.inner > div.hgroup {
   padding-left: 10px;
   padding-right: 10px;
 }
-div.sect-links > div.hgroup {
+section.links > div.hgroup {
   border-bottom: solid 2px </xsl:text>
     <xsl:value-of select="$color.blue_border"/><xsl:text>;
   margin-left: -10px;
@@ -818,7 +818,7 @@ div.sect-links > div.hgroup {
   padding-left: 10px;
   padding-right: 10px;
 }
-div.sect div.sect-links > div.hgroup {
+section section.links > div.hgroup {
   border: none;
 }
 h1, h2, h3, h4, h5, h6, h7 {
@@ -845,21 +845,21 @@ div.clear {
 }
 .center { text-align: center; }
 
-div.about {
+footer.about {
   color: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
   margin: 0;
   background-color: </xsl:text><xsl:value-of select="$color.background"/><xsl:text>;
 }
-div.about > div.inner > div.hgroup {
+footer.about > div.inner > div.hgroup {
   margin: 0; padding: 0;
   text-align: center;
   border: none;
 }
-div.about > div.inner > div.hgroup > h2 {
+footer.about > div.inner > div.hgroup > h2 {
   margin: 0; padding: 0.2em;
   font-size: inherit;
 }
-div.about.ui-expander > div.inner > div.hgroup span.title:before {
+footer.about.ui-expander > div.inner > div.hgroup span.title:before {
   content: "";
 }
 div.copyrights {
@@ -1488,12 +1488,12 @@ div.media-ttml-p {
     <xsl:value-of select="$color.gray_border"/><xsl:text>;
 }
 div.yelp-data { display: none; }
-div.ui-expander > div.inner > div.title span.title,
-div.ui-expander > div.inner > div.hgroup span.title {
+.ui-expander > div.inner > div.title span.title,
+.ui-expander > div.inner > div.hgroup span.title {
   cursor: default;
 }
-div.ui-expander > div.inner > div.title span.title:before,
-div.ui-expander > div.inner > div.hgroup span.title:before {
+.ui-expander > div.inner > div.title span.title:before,
+.ui-expander > div.inner > div.hgroup span.title:before {
   font-size: 2em;
   font-weight: normal;
   content: "⌃";
@@ -1502,26 +1502,26 @@ div.ui-expander > div.inner > div.hgroup span.title:before {
   vertical-align: bottom;
   color: </xsl:text><xsl:value-of select="$color.link"/><xsl:text>;
 }
-div.ui-expander-c > div.inner > div.hgroup { border-bottom: none; }
-div.ui-expander-e > div.inner > div.title span.title:before,
-div.ui-expander-e > div.inner > div.hgroup span.title:before {
+.ui-expander-c > div.inner > div.hgroup { border-bottom: none; }
+.ui-expander-e > div.inner > div.title span.title:before,
+.ui-expander-e > div.inner > div.hgroup span.title:before {
   content: "⌄";
   vertical-align: top;
 }
-div.ui-expander > div.inner > div.title:hover,
-div.ui-expander > div.inner > div.hgroup:hover * {
+.ui-expander > div.inner > div.title:hover,
+.ui-expander > div.inner > div.hgroup:hover * {
   color: </xsl:text><xsl:value-of select="$color.link"/><xsl:text>;
 }
-div.ui-expander > div.inner > div.hgroup > .subtitle {
+.ui-expander > div.inner > div.hgroup > .subtitle {
   margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 2em;
 }
 @media only screen and (max-width: 480px) {
   div.body > div.region > div.contents > div.example,
   div.body > div.region > div.contents > div.steps,
   div.body > div.region > div.contents > div.note,
-  div.body > div.region > div.sect > div.inner > div.region > div.contents > div.example,
-  div.body > div.region > div.sect > div.inner > div.region > div.contents > div.steps,
-  div.body > div.region > div.sect > div.inner > div.region > div.contents > div.note {
+  div.body > div.region > section > div.inner > div.region > div.contents > div.example,
+  div.body > div.region > section > div.inner > div.region > div.contents > div.steps,
+  div.body > div.region > section > div.inner > div.region > div.contents > div.note {
     margin-left: -10px;
     margin-right: -10px;
   }
@@ -1530,7 +1530,7 @@ div.ui-expander > div.inner > div.hgroup > .subtitle {
     margin-right: 10px;
   }
   div.body > div.region > div.contents > div.note,
-  div.body > div.region > div.sect > div.inner > div.region > div.contents > div.note {
+  div.body > div.region > section > div.inner > div.region > div.contents > div.note {
     border-left: none;
     border-right: none;
   }
@@ -1874,8 +1874,8 @@ $(document).ready(function () {
   var expand_hash = function () {
     if (location.hash != '') {
       var target = $(location.hash);
-      var parents = target.parents('div.ui-expander');
-      if (target.is('div.ui-expander'))
+      var parents = target.parents('.ui-expander');
+      if (target.is('.ui-expander'))
         parents = parents.andSelf();
       parents.each(function () {
         $(this).yelp_ui_expander_toggle(true, function () {
diff --git a/xslt/dita/html/dita2html-topic.xsl b/xslt/dita/html/dita2html-topic.xsl
index 34aee49..21d5d5c 100644
--- a/xslt/dita/html/dita2html-topic.xsl
+++ b/xslt/dita/html/dita2html-topic.xsl
@@ -189,7 +189,7 @@ REMARK: Describe this module
   <xsl:variable name="publishers" select="$info/&topic_publisher;"/>
   <xsl:variable name="others" select="$info/&topic_author;[not(@type = 'creator' or @type = 'translator')]"/>
   <xsl:if test="$copyrights or $authors or $translators or $publishers or $others">
-    <div class="sect about ui-expander" role="contentinfo">
+    <footer class="about ui-expander" role="contentinfo">
       <div class="yelp-data yelp-data-ui-expander" data-yelp-expanded="false"/>
       <div class="inner">
         <div class="hgroup">
@@ -243,7 +243,7 @@ REMARK: Describe this module
           </div>
         </div>
       </div>
-    </div>
+    </footer>
   </xsl:if>
 </xsl:template>
 
@@ -493,16 +493,16 @@ div.dita-object > div.desc {
   <xsl:param name="topicref" select="/false"/>
   <xsl:choose>
     <xsl:when test="parent::&topic_topic_all;">
-      <div>
+      <section>
         <xsl:call-template name="dita.id"/>
         <xsl:call-template name="html.lang.attrs"/>
         <xsl:call-template name="html.class.attr">
-          <xsl:with-param name="class" select="'sect'"/>
+          <xsl:with-param name="class" select="local-name(.)"/>
         </xsl:call-template>
         <div class="inner">
           <xsl:call-template name="_dita2html.topic.inner"/>
         </div>
-      </div>
+      </section>
     </xsl:when>
     <xsl:otherwise>
       <xsl:call-template name="_dita2html.topic.inner">
@@ -565,10 +565,10 @@ div.dita-object > div.desc {
 </xsl:template>
 
 <xsl:template mode="dita2html.topic.mode" match="&topic_related-links;">
-  <div role="navigation">
+  <section role="navigation">
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
-      <xsl:with-param name="class" select="'sect sect-links'"/>
+      <xsl:with-param name="class" select="'links'"/>
     </xsl:call-template>
     <div class="hgroup"/>
     <div class="contents">
@@ -584,7 +584,7 @@ div.dita-object > div.desc {
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </xsl:template>
 
 <xsl:template mode="dita2html.topic.mode" match="&topic_link;">
diff --git a/xslt/docbook/common/db-selectors.mod b/xslt/docbook/common/db-selectors.mod
index c32e1eb..113696f 100644
--- a/xslt/docbook/common/db-selectors.mod
+++ b/xslt/docbook/common/db-selectors.mod
@@ -70,5 +70,5 @@ self::sect3info or
 self::sect4info or
 self::sect5info or
 self::sectioninfo or
-self::setindexinfo or
+self::setindexinfo
 ]">
diff --git a/xslt/docbook/html/db2html-division.xsl b/xslt/docbook/html/db2html-division.xsl
index 912de89..e690cc9 100644
--- a/xslt/docbook/html/db2html-division.xsl
+++ b/xslt/docbook/html/db2html-division.xsl
@@ -120,28 +120,31 @@ REMARK: Talk about some of the parameters
       <xsl:with-param name="node" select="$node"/>
     </xsl:call-template>
   </xsl:param>
-  <!-- FIXME: these two parameters don't make much sense now -->
   <xsl:param name="chunk_divisions"
              select="($depth_in_chunk = 0) and
                      ($depth_of_chunk &lt; $db.chunk.max_depth)"/>
   <xsl:choose>
     <xsl:when test="$depth_in_chunk != 0">
-      <div>
+      <section>
+        <xsl:choose>
+          <xsl:when test="$node/@xml:id">
+            <xsl:attribute name="id">
+              <xsl:value-of select="$node/@xml:id"/>
+            </xsl:attribute>
+          </xsl:when>
+          <xsl:when test="$node/@id">
+            <xsl:attribute name="id">
+              <xsl:value-of select="$node/@id"/>
+            </xsl:attribute>
+          </xsl:when>
+        </xsl:choose>
         <xsl:call-template name="html.lang.attrs">
           <xsl:with-param name="node" select="$node"/>
         </xsl:call-template>
         <xsl:call-template name="html.class.attr">
           <xsl:with-param name="node" select="$node"/>
-          <xsl:with-param name="class">
-            <xsl:value-of select="local-name($node)"/>
-            <xsl:text> sect</xsl:text>
-          </xsl:with-param>
+          <xsl:with-param name="class" select="local-name($node)"/>
         </xsl:call-template>
-        <xsl:if test="$node/@id">
-          <xsl:attribute name="id">
-            <xsl:value-of select="$node/@id"/>
-          </xsl:attribute>
-        </xsl:if>
         <div class="inner">
           <xsl:call-template name="_db2html.division.div.inner">
             <xsl:with-param name="node" select="$node"/>
@@ -153,7 +156,7 @@ REMARK: Talk about some of the parameters
             <xsl:with-param name="chunk_divisions" select="$chunk_divisions"/>
           </xsl:call-template>
         </div>
-      </div>
+      </section>
     </xsl:when>
     <xsl:otherwise>
       <xsl:call-template name="_db2html.division.div.inner">
@@ -371,7 +374,7 @@ the division. By default it is called by the %{html.footer.mode} implementation.
   <xsl:variable name="legal" select="$info/legalnotice | $info/db:legalnotice"/>
   <xsl:if test="$copyrights or $authors or $editors or $translators or
                 $publishers or $othercredits or $legal">
-    <div class="sect about ui-expander" role="contentinfo">
+    <footer class="about ui-expander" role="contentinfo">
       <div class="yelp-data yelp-data-ui-expander" data-yelp-expanded="false"/>
       <div class="inner">
       <div class="hgroup">
@@ -448,7 +451,7 @@ the division. By default it is called by the %{html.footer.mode} implementation.
         </div>
       </div>
       </div>
-    </div>
+    </footer>
   </xsl:if>
 </xsl:template>
 
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 02a971f..a2e46db 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -62,7 +62,7 @@ the #{page} element. Information is extracted from the #{info} element of ${node
 <xsl:template name="mal2html.page.about">
   <xsl:param name="node" select="."/>
   <xsl:if test="$node/mal:info/mal:credit or $node/mal:info/mal:license">
-  <div class="sect about ui-expander" role="contentinfo">
+  <footer class="about ui-expander" role="contentinfo">
     <div class="yelp-data yelp-data-ui-expander" data-yelp-expanded="false"/>
     <div class="inner">
     <div class="hgroup">
@@ -171,7 +171,7 @@ the #{page} element. Information is extracted from the #{info} element of ${node
       </div>
     </div>
     </div>
-  </div>
+  </footer>
   </xsl:if>
 </xsl:template>
 
@@ -604,13 +604,12 @@ templates that handle #{page} and #{section} elements.
 -->
 <xsl:template name="mal2html.section">
   <xsl:param name="node" select="."/>
-  <div id="{$node/@id}">
+  <section id="{$node/@id}">
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="node" select="$node"/>
       <xsl:with-param name="class">
-        <xsl:text>sect</xsl:text>
         <xsl:if test="@ui:expanded or @uix:expanded">
-          <xsl:text> ui-expander</xsl:text>
+          <xsl:text>ui-expander</xsl:text>
         </xsl:if>
       </xsl:with-param>
     </xsl:call-template>
@@ -620,7 +619,7 @@ templates that handle #{page} and #{section} elements.
     <div class="inner">
       <xsl:apply-templates select="$node"/>
     </div>
-  </div>
+  </section>
 </xsl:template>
 
 
@@ -736,7 +735,7 @@ templates that handle #{page} and #{section} elements.
                   ($postlinks[self::mal:links[ type = 'seealso']] or
                     (mal:section and not(mal:links[ type = 'seealso']))))
                 ">
-    <div class="sect sect-links" role="navigation">
+    <section class="links" role="navigation">
       <div class="hgroup"/>
       <div class="contents">
         <xsl:for-each select="$postlinks">
@@ -789,7 +788,7 @@ templates that handle #{page} and #{section} elements.
           </xsl:call-template>
         </xsl:if>
       </div>
-    </div>
+    </section>
   </xsl:if>
   </div>
 </xsl:template>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]