Fix special char encoding in notebook (#76)

* Fix special char encoding in notebook

* Update docstring

* Use percent-encoding instead of base64

* Add test case

* gitignore geckodriver on windows

Author: Conengmo

.gitignore

@@ -54,6 +54,7 @@ examples/foo.html
 # documentation builds
 docs/_build
 
+geckodriver.exe
 geckodriver.log
 
 # Pycharm

branca/element.py

@@ -10,6 +10,7 @@
 import json
 import warnings
 from collections import OrderedDict
+import urllib.parse
 from urllib.request import urlopen
 from uuid import uuid4
 
@@ -319,15 +320,20 @@ def render(self, **kwargs):
         return self._template.render(this=self, kwargs=kwargs)
 
     def _repr_html_(self, **kwargs):
-        """Displays the Figure in a Jupyter notebook."""
-        # Base64-encoded HTML is stored in a data-html attribute, which is used to populate
-        # the iframe. This approach does not encounter the 2MB limit in Chrome for storing
-        # the HTML in the src attribute with a data URI. The alternative of using a srcdoc
-        # attribute is not supported in Microsoft Internet Explorer and Edge.
-        html = base64.b64encode(self.render(**kwargs).encode('utf8')).decode('utf8')
+        """Displays the Figure in a Jupyter notebook.
+
+        Percent-encoded HTML is stored in data-html attribute, which is used to populate
+        the iframe. This approach does not encounter the 2MB limit in Chrome for storing
+        the HTML in the src attribute with a data URI. The alternative of using a srcdoc
+        attribute is not supported in Microsoft Internet Explorer and Edge.
+
+        """
+        html = urllib.parse.quote(self.render(**kwargs))
         onload = (
             'this.contentDocument.open();'
-            'this.contentDocument.write(atob(this.getAttribute(\'data-html\')));'
+            'this.contentDocument.write('
+            '    decodeURIComponent(this.getAttribute(\'data-html\'))'
+            ');'
             'this.contentDocument.close();'
         )
 

tests/test_iframe.py

@@ -4,6 +4,7 @@
 Folium Element Module class IFrame
 ----------------------
 """
+import os
 
 import pytest
 from selenium.webdriver import Firefox
@@ -33,3 +34,29 @@ def test_rendering_utf8_iframe():
     driver.get('data:text/html,' + iframe.render())
     driver.switch_to.frame(0)
     assert u'Cerrahpaşa Tıp Fakültesi' in driver.page_source
+
+
+@pytest.mark.headless
+def test_rendering_figure_notebook():
+    """Verify special characters are correctly rendered in Jupyter notebooks."""
+    text = '5/7 %, Линейная улица, "\u00e9 Berdsk"'
+    figure = elem.Figure()
+    elem.Html(text).add_to(figure.html)
+    html = figure._repr_html_()
+
+    filepath = 'temp_test_rendering_figure_notebook.html'
+    filepath = os.path.abspath(filepath)
+    with open(filepath, 'w') as f:
+        f.write(html)
+
+    options = Options()
+    options.add_argument('-headless')
+    driver = Firefox(options=options)
+    try:
+        driver.get('file://' + filepath)
+        driver.switch_to.frame(0)
+        text_div = driver.find_element_by_css_selector('div')
+        assert text_div.text == text
+    finally:
+        os.remove(filepath)
+        driver.quit()