pyblog: add postprocessor process_footnote_backlinks

Add class and variation selector (# U+FE0E: VARIATION SELECTOR-15) to
U+21A9: LEFTWARDS ARROW WITH HOOK to fix outstanding font issue of
footnote backlinks on mobile.

Updated styles accordingly.

Trick learned from Daring Fireball.

Before: https://i.imgur.com/eUbL1k8.png
After: https://i.imgur.com/msv3INn.png

2 files changed, 26 insertions, 0 deletions

diff --git a/pyblog b/pyblog
index aac4bd9d..0cba605a 100755
--- a/pyblog
+++ b/pyblog
@@ -625,6 +625,18 @@ def link_img_tags(soup):
         img_tag.replace_with(a_tag)
 
 
+def process_footnote_backlinks(soup):
+    """Add class attribute "footnotes-backlink" to each footnote backlink."""
+    for footnotes in soup.find_all("div", attrs={"class": "footnotes"}):
+        for fn_a_tag in footnotes.find_all(lambda tag:
+                                           tag.name == "a" and
+                                           tag.has_attr("href") and
+                                           tag["href"].startswith("#fnref") and
+                                           tag.string == "\u21A9"):  # U+21A9: LEFTWARDS ARROW WITH HOOK
+            fn_a_tag["class"] = "footnotes-backlink"
+            fn_a_tag.string = "\u21A9\uFE0E" # U+FE0E: VARIATION SELECTOR-15
+
+
 def postprocess_html_file(htmlfilepath):
     """Perform a series of postprocessing to an HTML file."""
     with open(htmlfilepath, "r+", encoding="utf-8") as htmlfileobj:
@@ -633,6 +645,7 @@ def postprocess_html_file(htmlfilepath):
         # a series of postprocessing (extensible)
         number_code_lines(soup)
         link_img_tags(soup)
+        process_footnote_backlinks(soup)
 
         # write back
         htmlfileobj.seek(0)
diff --git a/source/css/theme.css b/source/css/theme.css
index cc7cdc64..4de354c1 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -133,6 +133,19 @@ div.footnotes code {
     font-size: 0.87em;
 }
 
+a.footnotes-backlink {
+    margin-left: 0.2em;
+    font-size: 1.2em;
+    vertical-align: -0.2em;
+    color: #bbb;
+    text-decoration: none;
+}
+
+a.footnotes-backlink:hover {
+    background-color: #bbb;
+    color: #fff;
+}
+
 img {
     display: block;
     max-width: 100%;