HTML: prevent gratuitious emojification on iOS.

iOS chooses to render a number of Unicode entities,
including '↩', as big colorful emoji.  This can be
defeated by appending Unicode
VARIATION SELECTOR-15'/'VARIATION SELECTOR-16'.
So we now append this character when escaping
strings, for both '↩' and '↔'.

If other characters prove problematic, they can
simply be added to needsVariationSelector.

Closes #5469.

src/Text/Pandoc/Writers/HTML.hs

@@ -108,11 +108,20 @@ defaultWriterState = WriterState {stNotes= [], stMath = False, stQuotes = False,
 strToHtml :: String -> Html
 strToHtml ('\'':xs) = preEscapedString "\'" `mappend` strToHtml xs
 strToHtml ('"' :xs) = preEscapedString "\"" `mappend` strToHtml xs
-strToHtml xs@(_:_)  = case break (\c -> c == '\'' || c == '"') xs of
+strToHtml (x:xs) | needsVariationSelector x
+                    = preEscapedString [x, '\xFE0E'] `mappend` strToHtml xs
+strToHtml xs@(_:_)  = case break (\c -> c == '\'' || c == '"' ||
+                                        needsVariationSelector c) xs of
                            (_ ,[]) -> toHtml xs
                            (ys,zs) -> toHtml ys `mappend` strToHtml zs
 strToHtml [] = ""
 
+-- See #5469: this prevents iOS from substituting emojis.
+needsVariationSelector :: Char -> Bool
+needsVariationSelector '↩' = True
+needsVariationSelector '↔' = True
+needsVariationSelector _   = False
+
 -- | Hard linebreak.
 nl :: WriterOptions -> Html
 nl opts = if writerWrapText opts == WrapNone

test/command/4235.md

@@ -6,7 +6,7 @@ This.^[Has a footnote.]
 <section class="footnotes" role="doc-endnotes">
 <hr />
 <ol>
-<li id="foofn1" role="doc-endnote"><p>Has a footnote.<a href="#foofnref1" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<li id="foofn1" role="doc-endnote"><p>Has a footnote.<a href="#foofnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
 </ol>
 </section>
 ```

test/writer.html4

@@ -535,14 +535,14 @@ Blah
 <div class="footnotes">
 <hr />
 <ol>
-<li id="fn1"><p>Here is the footnote. It can go anywhere after the footnote reference. It need not be placed at the end of the document.<a href="#fnref1" class="footnote-back">↩</a></p></li>
+<li id="fn1"><p>Here is the footnote. It can go anywhere after the footnote reference. It need not be placed at the end of the document.<a href="#fnref1" class="footnote-back">↩︎</a></p></li>
 <li id="fn2"><p>Here’s the long note. This one contains multiple blocks.</p>
 <p>Subsequent blocks are indented to show that they belong to the footnote (as with list items).</p>
 <pre><code>  { &lt;code&gt; }</code></pre>
-<p>If you want, you can indent every line, but you can also be lazy and just indent the first line of each block.<a href="#fnref2" class="footnote-back">↩</a></p></li>
+<p>If you want, you can indent every line, but you can also be lazy and just indent the first line of each block.<a href="#fnref2" class="footnote-back">↩︎</a></p></li>
-<li id="fn3"><p>This is <em>easier</em> to type. Inline notes may contain <a href="http://google.com">links</a> and <code>]</code> verbatim characters, as well as [bracketed text].<a href="#fnref3" class="footnote-back">↩</a></p></li>
+<li id="fn3"><p>This is <em>easier</em> to type. Inline notes may contain <a href="http://google.com">links</a> and <code>]</code> verbatim characters, as well as [bracketed text].<a href="#fnref3" class="footnote-back">↩︎</a></p></li>
-<li id="fn4"><p>In quote.<a href="#fnref4" class="footnote-back">↩</a></p></li>
+<li id="fn4"><p>In quote.<a href="#fnref4" class="footnote-back">↩︎</a></p></li>
-<li id="fn5"><p>In list.<a href="#fnref5" class="footnote-back">↩</a></p></li>
+<li id="fn5"><p>In list.<a href="#fnref5" class="footnote-back">↩︎</a></p></li>
 </ol>
 </div>
 </body>

test/writer.html5

@@ -537,14 +537,14 @@ Blah
 <section class="footnotes" role="doc-endnotes">
 <hr />
 <ol>
-<li id="fn1" role="doc-endnote"><p>Here is the footnote. It can go anywhere after the footnote reference. It need not be placed at the end of the document.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<li id="fn1" role="doc-endnote"><p>Here is the footnote. It can go anywhere after the footnote reference. It need not be placed at the end of the document.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
 <li id="fn2" role="doc-endnote"><p>Here’s the long note. This one contains multiple blocks.</p>
 <p>Subsequent blocks are indented to show that they belong to the footnote (as with list items).</p>
 <pre><code>  { &lt;code&gt; }</code></pre>
-<p>If you want, you can indent every line, but you can also be lazy and just indent the first line of each block.<a href="#fnref2" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<p>If you want, you can indent every line, but you can also be lazy and just indent the first line of each block.<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
-<li id="fn3" role="doc-endnote"><p>This is <em>easier</em> to type. Inline notes may contain <a href="http://google.com">links</a> and <code>]</code> verbatim characters, as well as [bracketed text].<a href="#fnref3" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<li id="fn3" role="doc-endnote"><p>This is <em>easier</em> to type. Inline notes may contain <a href="http://google.com">links</a> and <code>]</code> verbatim characters, as well as [bracketed text].<a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
-<li id="fn4" role="doc-endnote"><p>In quote.<a href="#fnref4" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<li id="fn4" role="doc-endnote"><p>In quote.<a href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
-<li id="fn5" role="doc-endnote"><p>In list.<a href="#fnref5" class="footnote-back" role="doc-backlink">↩</a></p></li>
+<li id="fn5" role="doc-endnote"><p>In list.<a href="#fnref5" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
 </ol>
 </section>
 </body>