From f3ed5312655ac8b17a9e79db5bce255ce091abc0 2012-06-10 18:32:40
From: mcelrath <mcelrath@tardis>
Date: 2012-06-10 18:32:40
Subject: [PATCH] Add bad font detection, and a dialog informing the user.

---

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index 0a1f975..3202f37 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -334,3 +334,7 @@ p.dialog {
    to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
  */
 pre, code, kbd, samp { white-space: pre-wrap; }
+
+#fonttest {
+    font-family: monospace;
+}
diff --git a/IPython/frontend/html/notebook/static/js/notebookmain.js b/IPython/frontend/html/notebook/static/js/notebookmain.js
index 01b19eb..69562d1 100644
--- a/IPython/frontend/html/notebook/static/js/notebookmain.js
+++ b/IPython/frontend/html/notebook/static/js/notebookmain.js
@@ -35,6 +35,40 @@ $(document).ready(function () {
 
     IPython.layout_manager.do_resize();
 
+    $('body').append('<div id="fonttest"><pre><span id="test1">x</span>'+
+                     '<span id="test2" style="font-weight: bold;">x</span>'+
+                     '<span id="test3" style="font-style: italic;">x</span></pre></div>')
+    var nh = $('#test1').innerHeight();
+    var bh = $('#test2').innerHeight();
+    var ih = $('#test3').innerHeight();
+    var dialog = $('<div/>');
+    if(nh != bh || nh != ih) {
+        dialog.html('We have detected that your browser is using a '+
+                    '<span style="font-family: monospace;">monospace</span> font that has an '+
+                    'inconsistent size between  '+
+                    '<span style="font-family: monospace;">normal</span>, '+
+                    '<span style="font-family: monospace; font-weight: bold;">bold</span>, and '+
+                    '<span style="font-family: monospace; font-style: italic;">italic</span> '+
+                    'variants, which are used by IPython for syntax highlighting.  '+
+                    'This will cause visual artifacts.  (The font is probably "Courier New")  '+
+                    'We recommend that you configure your browser to use a different '+
+                    'monospace font.<br/><br/>'+
+                    'normal='+String(nh)+'px bold='+String(bh)+'px italic='+String(ih)+'px');
+        $(document).append(dialog);
+        dialog.dialog({
+            resizable: false,
+            modal: true,
+            title: "Bad fonts detected",
+            closeText: '',
+            buttons : {
+                "Ok": function () {
+                    $(this).dialog('close');
+                }
+            }
+        });
+        $('#fonttest').remove();
+    }
+
     if(IPython.read_only){
         // hide various elements from read-only view
         $('div#pager').remove();