|
From: <mi...@us...> - 2021-03-09 12:54:00
|
Revision: 8632
http://sourceforge.net/p/docutils/code/8632
Author: milde
Date: 2021-03-09 12:53:57 +0000 (Tue, 09 Mar 2021)
Log Message:
-----------
HTML5 writer: Add a `viewport` meta tag to fix rendering in mobile browsers.
The default behaviour of many mobile browsers is to render for a
virtual viewport size and scale.
This breaks CSS styling with the default stylesheets.
Modified Paths:
--------------
trunk/docutils/HISTORY.txt
trunk/docutils/docs/user/rst/demo.txt
trunk/docutils/docutils/writers/_html_base.py
trunk/docutils/docutils/writers/html5_polyglot/__init__.py
trunk/docutils/docutils/writers/html5_polyglot/responsive.css
trunk/docutils/test/functional/expected/embed_images_html5.html
trunk/docutils/test/functional/expected/footnotes_html5.html
trunk/docutils/test/functional/expected/math_output_mathml.xhtml
trunk/docutils/test/functional/expected/standalone_rst_html5.html
trunk/docutils/test/functional/input/data/html5-features.txt
trunk/docutils/test/test_writers/test_html5_polyglot_parts.py
Modified: trunk/docutils/HISTORY.txt
===================================================================
--- trunk/docutils/HISTORY.txt 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/HISTORY.txt 2021-03-09 12:53:57 UTC (rev 8632)
@@ -102,7 +102,11 @@
is found in `inline` and `literal` elements.
Use <ins> and <del> if a matching class value
is found in `inline`, `literal`, or `container` elements.
+
+ - Add a `viewport meta tag`__ to fix rendering in mobile browsers.
+ __ https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
+
* docutils/writers/html5_polyglot/responsive.css
- New optional stylesheet that adapts to different screen sizes.
Modified: trunk/docutils/docs/user/rst/demo.txt
===================================================================
--- trunk/docutils/docs/user/rst/demo.txt 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/docs/user/rst/demo.txt 2021-03-09 12:53:57 UTC (rev 8632)
@@ -523,15 +523,10 @@
The `“meta” directive`__ is used to specify metadata to be stored in,
e.g., HTML META tags or ODT file properties.
-.. hint::
- Use a `viewport meta tag`__ to tell mobile browsers
- to use the device-width as viewport.
-
.. meta::
:keywords: reStructuredText, test, parser
:description lang=en: A test document, containing at least one
example of each reStructuredText construct.
- :viewport: width=device-width, initial-scale=1
__ https://docutils.sourceforge.io/docs/ref/rst/directives.html#metadata
__ https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Modified: trunk/docutils/docutils/writers/_html_base.py
===================================================================
--- trunk/docutils/docutils/writers/_html_base.py 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/docutils/writers/_html_base.py 2021-03-09 12:53:57 UTC (rev 8632)
@@ -168,7 +168,7 @@
head_prefix_template = ('<html xmlns="http://www.w3.org/1999/xhtml"'
' xml:lang="%(lang)s" lang="%(lang)s">\n<head>\n')
- content_type = ('<meta charset="%s"/>\n')
+ content_type = '<meta charset="%s"/>\n'
generator = ('<meta name="generator" content="Docutils %s: '
'http://docutils.sourceforge.net/" />\n')
Modified: trunk/docutils/docutils/writers/html5_polyglot/__init__.py
===================================================================
--- trunk/docutils/docutils/writers/html5_polyglot/__init__.py 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/docutils/writers/html5_polyglot/__init__.py 2021-03-09 12:53:57 UTC (rev 8632)
@@ -164,6 +164,10 @@
and examples.
"""
+ # meta tag to fix rendering in mobile browsers
+ viewport = ('<meta name="viewport" '
+ 'content="width=device-width, initial-scale=1" />\n')
+
# <acronym> tag obsolete in HTML5. Use the <abbr> tag instead.
def visit_acronym(self, node):
# @@@ implementation incomplete ("title" attribute)
@@ -242,6 +246,8 @@
self.head_prefix_template %
{'lang': self.settings.language_code}])
self.html_prolog.append(self.doctype)
+ self.meta.insert(0, self.viewport)
+ self.head.insert(0, self.viewport)
self.meta.insert(0, self.content_type % self.settings.output_encoding)
self.head.insert(0, self.content_type % self.settings.output_encoding)
if 'name="dcterms.' in ''.join(self.meta):
Modified: trunk/docutils/docutils/writers/html5_polyglot/responsive.css
===================================================================
--- trunk/docutils/docutils/writers/html5_polyglot/responsive.css 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/docutils/writers/html5_polyglot/responsive.css 2021-03-09 12:53:57 UTC (rev 8632)
@@ -234,10 +234,6 @@
}
/* Literal and Code */
-pre {
- font-size: 0.9;
- /* overflow: auto; */
-}
pre.code .ln { color: gray; } /* line numbers */
/* basic highlighting: for a complete scheme, see */
/* http://docutils.sourceforge.net/sandbox/stylesheets/ */
@@ -355,6 +351,10 @@
dl.option-list > dd {
margin-left: 2.4em;
}
+ pre, pre * {
+ font-size: 0.9em;
+ /* overflow: auto; */
+ }
}
/* Move ToC to the left */
Modified: trunk/docutils/test/functional/expected/embed_images_html5.html
===================================================================
--- trunk/docutils/test/functional/expected/embed_images_html5.html 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/test/functional/expected/embed_images_html5.html 2021-03-09 12:53:57 UTC (rev 8632)
@@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content="Docutils 0.17b2.dev: http://docutils.sourceforge.net/" />
<title>Embedded Images</title>
<link rel="stylesheet" href="../../../docutils/writers/html5_polyglot/minimal.css" type="text/css" />
Modified: trunk/docutils/test/functional/expected/footnotes_html5.html
===================================================================
--- trunk/docutils/test/functional/expected/footnotes_html5.html 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/test/functional/expected/footnotes_html5.html 2021-03-09 12:53:57 UTC (rev 8632)
@@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content="Docutils 0.17b2.dev: http://docutils.sourceforge.net/" />
<title>Test footnote and citation rendering</title>
<link rel="stylesheet" href="../input/data/minimal.css" type="text/css" />
Modified: trunk/docutils/test/functional/expected/math_output_mathml.xhtml
===================================================================
--- trunk/docutils/test/functional/expected/math_output_mathml.xhtml 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/test/functional/expected/math_output_mathml.xhtml 2021-03-09 12:53:57 UTC (rev 8632)
@@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content="Docutils 0.17b2.dev: http://docutils.sourceforge.net/" />
<title>Mathematics</title>
<link rel="stylesheet" href="../input/data/minimal.css" type="text/css" />
Modified: trunk/docutils/test/functional/expected/standalone_rst_html5.html
===================================================================
--- trunk/docutils/test/functional/expected/standalone_rst_html5.html 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/test/functional/expected/standalone_rst_html5.html 2021-03-09 12:53:57 UTC (rev 8632)
@@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content="Docutils 0.17b2.dev: http://docutils.sourceforge.net/" />
<title>reStructuredText Test Document</title>
<meta name="author" content="David Goodger" />
@@ -12,7 +13,6 @@
<meta name="dcterms.rights" content="This document has been placed in the public domain. You may do with it as you wish. You may copy, modify, redistribute, reattribute, sell, buy, rent, lease, destroy, or improve it, quote it at length, excerpt, incorporate, collate, fold, staple, or mutilate it, or do anything else to it that your or anyone else's heart desires." />
<meta content="reStructuredText, test, parser" name="keywords" />
<meta content="A test document, containing at least one example of each reStructuredText construct." lang="en" name="description" xml:lang="en" />
-<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="schema.dcterms" href="http://purl.org/dc/terms/"/>
<link rel="stylesheet" href="../input/data/minimal.css" type="text/css" />
<link rel="stylesheet" href="../input/data/plain.css" type="text/css" />
@@ -1256,18 +1256,14 @@
<section id="changes-to-the-html4css1-writer">
<h2><a class="toc-backref" href="#toc-entry-43"><span class="sectnum">3</span> Changes to the <cite>html4css1</cite> Writer</a></h2>
<ul>
-<li><p>Use only meta keywords recognized by HTML 5.
+<li><p>Use only <a class="reference internal" href="#meta">meta</a> keywords recognized by HTML 5.
Add HTML5-compatible meta tags for docinfo items
"authors", "date", and "copyright".</p>
-<div class="admonition hint">
-<p class="admonition-title">Hint</p>
-<p>Use a <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag">viewport meta tag</a> <a class="footnote-reference brackets" href="#footnote-15" id="footnote-reference-29">15</a> to tell mobile browsers
+<p>Add a <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag">viewport meta tag</a> <a class="footnote-reference brackets" href="#footnote-15" id="footnote-reference-29">15</a> to tell mobile browsers
to use the device-width as viewport.</p>
-</div>
</li>
<li><p>Set table column widths with <style="width: ...">, not "width" argument.</p></li>
<li><p>Horizontal alignment of table heads with CSS.</p></li>
-<li><p>Field lists as styled definition lists.</p></li>
<li><p>Do not drop paragraph objects, use CSS rules to prevent unwanted vertical
space.</p></li>
<li><p>Put subtitles in <p> elements.</p></li>
@@ -1277,11 +1273,12 @@
<p>Change the <cite>initial_header_level</cite> setting default to "2", as browsers
use the <a class="reference external" href="https://stackoverflow.com/questions/39547412/same-font-size-for-h1-and-h2-in-article">same style for <h1> and <h2> when nested in a <section></a> <a class="footnote-reference brackets" href="#footnote-16" id="footnote-reference-30">16</a>.</p>
</li>
-<li><p>Use HTML text-level tags <small>, <s>, <q>, <dfn>, <var>, <samp>, <kbd>,
+<li><p>Use HTML5 tags <small>, <s>, <q>, <dfn>, <var>, <samp>, <kbd>,
<i>, <b>, <u>, <mark>, and <bdi> if a matching class value
is found in <cite>inline</cite> and <cite>literal</cite> elements.
Use <ins> and <del> if a matching class value
-is found in <cite>inline</cite>, <cite>literal</cite>, or <cite>container</cite> elements.</p></li>
+is found in <cite>inline</cite>, <cite>literal</cite>, or <cite>container</cite> elements.
+(See <a class="reference internal" href="#text-level-semantics">text-level semantics</a> and <a class="reference internal" href="#indicating-edits">indicating edits</a>.)</p></li>
</ul>
<section id="field-list-rendering">
<h3><a class="toc-backref" href="#toc-entry-44"><span class="sectnum">3.1</span> Field List Rendering</a></h3>
Modified: trunk/docutils/test/functional/input/data/html5-features.txt
===================================================================
--- trunk/docutils/test/functional/input/data/html5-features.txt 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/test/functional/input/data/html5-features.txt 2021-03-09 12:53:57 UTC (rev 8632)
@@ -1,26 +1,19 @@
Changes to the `html4css1` Writer
=================================
-* Use only meta keywords recognized by HTML 5.
+* Use only meta_ keywords recognized by HTML 5.
Add HTML5-compatible meta tags for docinfo items
"authors", "date", and "copyright".
- .. hint::
-
- Use a `viewport meta tag`__ to tell mobile browsers
- to use the device-width as viewport.
+ Add a `viewport meta tag`__ to tell mobile browsers
+ to use the device-width as viewport.
- .. meta::
- :viewport: width=device-width, initial-scale=1
+ __ https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
- __ https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
-
* Set table column widths with <style="width: ...">, not "width" argument.
* Horizontal alignment of table heads with CSS.
-* Field lists as styled definition lists.
-
* Do not drop paragraph objects, use CSS rules to prevent unwanted vertical
space.
@@ -35,11 +28,12 @@
__ https://stackoverflow.com/questions/39547412/same-font-size-for-h1-and-h2-in-article
-* Use HTML text-level tags <small>, <s>, <q>, <dfn>, <var>, <samp>, <kbd>,
+* Use HTML5 tags <small>, <s>, <q>, <dfn>, <var>, <samp>, <kbd>,
<i>, <b>, <u>, <mark>, and <bdi> if a matching class value
is found in `inline` and `literal` elements.
Use <ins> and <del> if a matching class value
is found in `inline`, `literal`, or `container` elements.
+ (See `text-level semantics`_ and `indicating edits`_.)
Field List Rendering
--------------------
Modified: trunk/docutils/test/test_writers/test_html5_polyglot_parts.py
===================================================================
--- trunk/docutils/test/test_writers/test_html5_polyglot_parts.py 2021-03-05 21:14:40 UTC (rev 8631)
+++ trunk/docutils/test/test_writers/test_html5_polyglot_parts.py 2021-03-09 12:53:57 UTC (rev 8632)
@@ -26,11 +26,14 @@
writer_name = 'html5'
standard_content_type_template = ('<meta charset="%s"/>\n')
- standard_generator_template = (
- '<meta name="generator"'
+ standard_generator_template = ('<meta name="generator"'
' content="Docutils %s: http://docutils.sourceforge.net/" />\n')
+ standard_viewport_template = ('<meta name="viewport"'
+ ' content="width=device-width, initial-scale=1" />\n')
+
standard_html_meta_value = (standard_content_type_template
- + standard_generator_template % __version__)
+ + standard_viewport_template
+ + standard_generator_template % __version__)
standard_meta_value = standard_html_meta_value % 'utf-8'
standard_html_prolog = '<!DOCTYPE html>\n'
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|