Menu
▾
▴
[Docutils-checkins] SF.net SVN: docutils:[8473] trunk/docutils
|
From: <mi...@us...> - 2020-01-30 00:44:29
|
Revision: 8473
http://sourceforge.net/p/docutils/code/8473
Author: milde
Date: 2020-01-30 00:44:27 +0000 (Thu, 30 Jan 2020)
Log Message:
-----------
html5: Use semantic tags <figure> and <figcaption>.
Modified Paths:
--------------
trunk/docutils/docutils/writers/html5_polyglot/__init__.py
trunk/docutils/test/functional/expected/standalone_rst_html5.html
trunk/docutils/test/test_writers/test_html5_polyglot_parts.py
Modified: trunk/docutils/docutils/writers/html5_polyglot/__init__.py
===================================================================
--- trunk/docutils/docutils/writers/html5_polyglot/__init__.py 2020-01-30 00:44:15 UTC (rev 8472)
+++ trunk/docutils/docutils/writers/html5_polyglot/__init__.py 2020-01-30 00:44:27 UTC (rev 8473)
@@ -159,6 +159,7 @@
def visit_acronym(self, node):
# @@@ implementation incomplete ("title" attribute)
self.body.append(self.starttag(node, 'abbr', ''))
+
def depart_acronym(self, node):
self.body.append('</abbr>')
@@ -167,11 +168,20 @@
def visit_authors(self, node):
self.visit_docinfo_item(node, 'authors', meta=False)
for subnode in node:
- self.add_meta('<meta name="author" content="%s" />\n' %
+ self.add_meta('<meta name="author" content="%s" />\n' %
self.attval(subnode.astext()))
+
def depart_authors(self, node):
self.depart_docinfo_item()
+
+ # don't add 'caption' class value
+ def visit_caption(self, node):
+ self.body.append('<figcaption>\n')
+ self.body.append(self.starttag(node, 'p', ''))
+ def depart_caption(self, node):
+ self.body.append('</p>\n')
+
# no standard meta tag name in HTML5, use dcterms.rights
# see https://wiki.whatwg.org/wiki/MetaExtensions
def visit_copyright(self, node):
@@ -178,6 +188,7 @@
self.visit_docinfo_item(node, 'copyright', meta=False)
self.add_meta('<meta name="dcterms.rights" content="%s" />\n'
% self.attval(node.astext()))
+
def depart_copyright(self, node):
self.depart_docinfo_item()
@@ -186,9 +197,24 @@
self.visit_docinfo_item(node, 'date', meta=False)
self.add_meta('<meta name="dcterms.date" content="%s" />\n'
% self.attval(node.astext()))
+
def depart_date(self, node):
self.depart_docinfo_item()
+ # use new HTML5 <figure> and <figcaption> elements
+ def visit_figure(self, node):
+ atts = {}
+ if node.get('width'):
+ atts['style'] = 'width: %s' % node['width']
+ if node.get('align'):
+ atts['class'] = "align-" + node['align']
+ self.body.append(self.starttag(node, 'figure', **atts))
+
+ def depart_figure(self, node):
+ if len(node) > 1:
+ self.body.append('</figcaption>\n')
+ self.body.append('</figure>\n')
+
# use HTML5 <footer> element
def visit_footer(self, node):
self.context.append(len(self.body))
@@ -202,6 +228,7 @@
self.body_suffix[:0] = footer
del self.body[start:]
+ # use HTML5 <header> element
def visit_header(self, node):
self.context.append(len(self.body))
@@ -213,7 +240,17 @@
self.body_prefix.extend(header)
self.header.extend(header)
del self.body[start:]
+
+ # place inside HTML5 <figcaption> element (together with caption)
+ def visit_legend(self, node):
+ if not isinstance(node.parent[1], nodes.caption):
+ self.body.append('<figcaption>\n')
+ self.body.append(self.starttag(node, 'div', CLASS='legend'))
+ def depart_legend(self, node):
+ self.body.append('</div>\n')
+ # <figcaption> closed in visit_figure()
+
# Meta tags: 'lang' attribute replaced by 'xml:lang' in XHTML 1.1
# HTML5/polyglot recommends using both
def visit_meta(self, node):
Modified: trunk/docutils/test/functional/expected/standalone_rst_html5.html
===================================================================
--- trunk/docutils/test/functional/expected/standalone_rst_html5.html 2020-01-30 00:44:15 UTC (rev 8472)
+++ trunk/docutils/test/functional/expected/standalone_rst_html5.html 2020-01-30 00:44:27 UTC (rev 8473)
@@ -595,9 +595,10 @@
<p>A <em>figure</em> is an image with a caption and/or a legend. With page-based output
media, figures might float to a different position if this helps the page
layout.</p>
-<div class="figclass1 figclass2 figure">
+<figure class="figclass1 figclass2">
<img alt="reStructuredText, the markup syntax" class="class1 class2" src="../../../docs/user/rst/images/title.png" style="width: 258px;" />
-<p class="caption">Plaintext markup syntax and parser system.</p>
+<figcaption>
+<p>Plaintext markup syntax and parser system.</p>
<div class="legend">
<table>
<colgroup>
@@ -618,40 +619,47 @@
</table>
<p>This paragraph is also part of the legend.</p>
</div>
-</div>
+</figcaption>
+</figure>
<p>A left-aligned figure:</p>
-<div class="figclass1 figclass2 figure align-left" style="width: 70%">
+<figure class="figclass1 figclass2 align-left" style="width: 70%">
<img alt="reStructuredText, the markup syntax" class="class1 class2" src="../../../docs/user/rst/images/biohazard.png" style="width: 40px;" />
-<p class="caption">This is the caption.</p>
+<figcaption>
+<p>This is the caption.</p>
<div class="legend">
<p>This is the legend.</p>
<p>The legend may consist of several paragraphs.</p>
</div>
-</div>
+</figcaption>
+</figure>
<p>This paragraph might flow around the figure.</p>
<p>The specific behavior depends upon the style sheet and the browser or
rendering software used.</p>
<p>A centered figure:</p>
-<div class="figure align-center">
+<figure class="align-center">
<img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 40px;" />
-<p class="caption">This is the caption.</p>
+<figcaption>
+<p>This is the caption.</p>
<div class="legend">
<p>This is the legend.</p>
<p>The legend may consist of several paragraphs.</p>
</div>
-</div>
+</figcaption>
+</figure>
<p>This paragraph might flow around the figure.</p>
<p>The specific behavior depends upon the style sheet and the browser or
rendering software used.</p>
<p>A right-aligned figure:</p>
-<div class="figure align-right">
+<figure class="align-right">
<img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 40px;" />
-<p class="caption">This is the caption.</p>
+<figcaption>
+<p>This is the caption.</p>
<div class="legend">
<p>This is the legend.</p>
<p>The legend may consist of several paragraphs.</p>
</div>
-</div>
+</figcaption>
+</figure>
<p>This paragraph might flow around the figure. The specific behavior depends
upon the style sheet and the browser or rendering software used.</p>
<p>Tables may be given titles and additional arguments with the <em>table</em>
@@ -1307,10 +1315,12 @@
</ul>
<p>SVG images can also be put in figures:</p>
<blockquote>
-<div class="figure align-center">
+<figure class="align-center">
<img alt="reStructuredText, the markup syntax" src="../../../docs/user/rst/images/title.svg" style="width: 290px; height: 28px;" />
-<p class="caption"><strong>Figure:</strong> SVG image in a figure.</p>
-</div>
+<figcaption>
+<p><strong>Figure:</strong> SVG image in a figure.</p>
+</figcaption>
+</figure>
</blockquote>
</section>
<section id="swf-images">
Modified: trunk/docutils/test/test_writers/test_html5_polyglot_parts.py
===================================================================
--- trunk/docutils/test/test_writers/test_html5_polyglot_parts.py 2020-01-30 00:44:15 UTC (rev 8472)
+++ trunk/docutils/test/test_writers/test_html5_polyglot_parts.py 2020-01-30 00:44:27 UTC (rev 8473)
@@ -423,7 +423,8 @@
:simple field list with loooong field: names
""",
"""\
-{'fragment': '''<p>Not a docinfo.</p>
+{'fragment': '''\
+<p>Not a docinfo.</p>
<dl class="field-list simple">
<dt>This is</dt>
<dd><p>a</p>
@@ -432,7 +433,8 @@
<dd><p>names</p>
</dd>
</dl>\\n''',
- 'html_body': '''<div class="document">
+ 'html_body': '''\
+<div class="document">
<p>Not a docinfo.</p>
<dl class="field-list simple">
<dt>This is</dt>
@@ -445,9 +447,119 @@
</div>\\n''',
'html_head': '''...<title><string></title>\\n'''}
"""],
+["""\
+.. figure:: dummy.png
+
+ The figure's caption.
+
+ A legend.
+
+ The legend's second paragraph.
+""",
+"""\
+{'fragment': '''\
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<p>The figure's caption.</p>
+<div class="legend">
+<p>A legend.</p>
+<p>The legend's second paragraph.</p>
+</div>
+</figcaption>
+</figure>\\n''',
+ 'html_body': '''\
+<div class="document">
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<p>The figure's caption.</p>
+<div class="legend">
+<p>A legend.</p>
+<p>The legend's second paragraph.</p>
+</div>
+</figcaption>
+</figure>
+</div>\\n''',
+ 'html_head': '''...<title><string></title>\\n'''}
+"""],
+["""\
+.. figure:: dummy.png
+
+ The figure's caption, no legend.
+""",
+"""\
+{'fragment': '''\
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<p>The figure's caption, no legend.</p>
+</figcaption>
+</figure>\\n''',
+ 'html_body': '''\
+<div class="document">
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<p>The figure's caption, no legend.</p>
+</figcaption>
+</figure>
+</div>\\n''',
+ 'html_head': '''...<title><string></title>\\n'''}
+"""],
+["""\
+.. figure:: dummy.png
+
+ ..
+
+ A legend without caption.
+""",
+"""\
+{'fragment': '''\
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<div class="legend">
+<p>A legend without caption.</p>
+</div>
+</figcaption>
+</figure>\\n''',
+ 'html_body': '''\
+<div class="document">
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+<figcaption>
+<div class="legend">
+<p>A legend without caption.</p>
+</div>
+</figcaption>
+</figure>
+</div>\\n''',
+ 'html_head': '''...<title><string></title>\\n'''}
+"""],
])
+["""\
+.. figure:: dummy.png
+No caption nor legend.
+""",
+"""\
+{'fragment': '''\
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+</figure>
+<p>No caption nor legend.</p>\\n''',
+ 'html_body': '''\
+<div class="document">
+<figure>
+<img alt="dummy.png" src="dummy.png" />
+</figure>
+<p>No caption nor legend.</p>
+</div>\\n''',
+ 'html_head': '''...<title><string></title>\\n'''}
+"""],
+
if __name__ == '__main__':
import unittest
unittest.main(defaultTest='suite')
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
