fix for #71 and #75: text disappears when changing font size and other subtle behaviors

This appears to be some complex bug with the @font-face rule in Chromium. The only surefire workaround I've found so far is to base64-encode the font and include it in a css file.

fix for #71 and #75: text disappears when changing font size and other subtle behaviors
This appears to be some complex bug with the @font-face rule in Chromium. The only surefire workaround I've found so far is to base64-encode the font and include it in a css file.
46b5c66b · Jonathan Wilkes · dbf13bf2 · dbf13bf2 · 46b5c66b · 46b5c66b
Commit 46b5c66b authored Jul 09, 2016 by Jonathan Wilkes
--- a/pd/nw/DejaVuSansMono.ttf
+++ b/pd/nw/DejaVuSansMono.ttf
--- a/pd/nw/css/c64.css
+++ b/pd/nw/css/c64.css
 /* Global CSS */

+/*
 @font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../DejaVuSansMono.ttf");
 }
+*/
+
+body {
+    margin: 0px;
+    font-family: "DejaVu Sans Mono";
+}

 .noselect {
    -webkit-touch-callout: none;
@@ -21,10 +28,6 @@

 /* The main Pd Window */

-#console_body {
-    margin: 0px;
-}
-
 #console_controls {
    background-color: LightGray;
    height: 50px; 
@@ -93,10 +96,8 @@ mark.console_find_highlighted {

 /* Pure Data Patch Window (aka canvas) */

-/* patch font and background color. (Note: margin needs to stay at zero.) */
-#patch_body {
-    margin: 0px;
-    font-family: "DejaVu Sans Mono";
+/* patch font and background color. */
+.patch_body {
    background-color: #3e32a2;
 }

@@ -333,16 +334,21 @@ text {

 /* Common to all dialogs */

+.dialog_body {
+    font-family: "DejaVu Sans", sans-serif;
+    background-color: #3e32a2;
+}
+
 .submit_buttons {
    text-align: center;
    padding: 8px;
 }

 fieldset {
-    font-family:Georgia;
-    background-color:#eeeeee;
+    color: #a49aea;
+    background-color: #3e32a2;
    border-radius:3px;
-    border:2px solid black;
+    border:1px solid #cc9933;
    margin-left:auto;
    margin-right:auto;
    padding: 10px;
@@ -452,12 +458,7 @@ div.y2 {
    height: 100vh;
 }

-#prefs_body {
-    margin-left: 0px;
-    margin-right: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-/*    height: 100%; */
+.prefs_body {
    padding: 0px;
 }

@@ -502,7 +503,7 @@ div.y2 {
    margin-top: 8px;
    margin-bottom: 0px;
    /* Set the background color to default gray (non-selected tab) */
-    background-color:#ececec;
+    background-color:#7569d7;
    height: 5vh;
 }

@@ -513,7 +514,7 @@ div.y2 {

 /* Checked tabs must be white with the bottom border removed */
 .prefs_tab:checked + label {
-    background-color: #f3f3f3;
+    background-color: #cc9933;
    text-shadow: 1px 0px 0px; /* substitute for "bold" to retain div width */
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: -1px;
@@ -539,6 +540,7 @@ div.y2 {

 .tab_settings {
    padding-top: 8px;
+    color: #a49aea;
 }

 #prefs_buttons {

--- a/pd/nw/css/default.css
+++ b/pd/nw/css/default.css
 /* Global CSS */

+/* Unfortunately we can't simply include a ttf font of our choice with our
+   project. Chrome has some subtle, nasty rendering bug that ends up making
+   the pd object text invisible. It seems to get triggered when opening a
+   new window-- like a dialog-- if it happens not to use the @font-face font
+   in the body. This ends up somehow breaking the display for the original
+   window. The text will turn invisible _sometimes_ when changing font size,
+   zooming, creating an array (the label might be invisible), or showing
+   the "Save before quitting" dialog. */
+/* 
 @font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../DejaVuSansMono.ttf");
 }
+*/
+
+body {
+    margin: 0px;
+    font-family: "DejaVu Sans Mono";
+}

 .noselect {
    -webkit-touch-callout: none;
@@ -21,10 +36,6 @@

 /* The Pd Console Window */

-#console_body {
-    margin: 0px;
-}
-
 #console_controls {
    background-color: LightGray;
    height: 40px;
@@ -192,9 +203,7 @@ mark.console_find_highlighted {
 /* Pure Data Patch Window (aka canvas) */

 /* patch font and background color. (Note: margin needs to stay at zero.) */
-#patch_body {
-    margin: 0px;
-    font-family: "DejaVu Sans Mono";
+.patch_body {
    background-color: white;
 }

@@ -458,6 +467,7 @@ text {
 /* Common to all dialogs */

 .dialog_body {
+    font-family: "DejaVu Sans", sans-serif;
    background-color: #f3f3f3;
 }

@@ -467,7 +477,7 @@ text {
 }

 fieldset {
-    font-family:Georgia;
+/*    font-family:Georgia; */
    background-color:#f3f3f3;
    border-radius:3px;
    border:1px solid #ddd;
@@ -592,12 +602,7 @@ div.y2 {
    height: 100vh;
 }

-#prefs_body {
-    margin-left: 0px;
-    margin-right: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-/*    height: 100%; */
+.prefs_body {
    padding: 0px;
 }


--- a/pd/nw/css/dejavu.css
+++ b/pd/nw/css/dejavu.css
--- a/pd/nw/css/extended.css
+++ b/pd/nw/css/extended.css
 /* Global CSS */

+/*
 @font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../DejaVuSansMono.ttf");
 }
+*/
+
+body {
+    margin: 0px;
+    font-family: "DejaVu Sans Mono";
+}

 .noselect {
    -webkit-touch-callout: none;
@@ -21,10 +28,6 @@

 /* The main Pd Window */

-#console_body {
-    margin: 0px;
-}
-
 #console_controls {
    background-color: LightGray;
    height: 50px; 
@@ -88,8 +91,7 @@ mark.console_find_highlighted {
 /* Pure Data Patch Window (aka canvas) */

 /* patch font and background color. (Note: margin needs to stay at zero.) */
-#patch_body {
-    margin: 0px;
+.patch_body {
    font-family: "DejaVu Sans Mono";
 }

@@ -326,13 +328,17 @@ text {

 /* Common to all dialogs */

+.dialog_body {
+    font-family: "DejaVu Sans", sans-serif;
+    background-color: #f3f3f3;
+}
+
 .submit_buttons {
    text-align: center;
    padding: 8px;
 }

 fieldset {
-    font-family:Georgia;
    background-color:#eeeeee;
    border-radius:3px;
    border:2px solid black;
@@ -351,11 +357,6 @@ fieldset {

 /* Iemgui dialog */

-#iemgui_dialog_body {
-    font-family:Verdana;
-    margin: 0px;
-}
-
 input[type="text"]{
    width:3em;
 }
@@ -445,12 +446,7 @@ div.y2 {
    height: 100vh;
 }

-#prefs_body {
-    margin-left: 0px;
-    margin-right: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-/*    height: 100%; */
+.prefs_body {
    padding: 0px;
 }


--- a/pd/nw/css/inverted.css
+++ b/pd/nw/css/inverted.css
 /* Global CSS */

+/*
 @font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../DejaVuSansMono.ttf");
 }
+*/
+
+body {
+    margin: 0px;
+    font-family: "DejaVu Sans Mono";
+}

 .noselect {
    -webkit-touch-callout: none;
@@ -22,10 +29,6 @@

 /* The main Pd Window */

-#console_body {
-    margin: 0px;
-}
-
 #console_controls {
    background-color: LightGray;
    height: 50px; 
@@ -103,9 +106,7 @@ mark.console_find_highlighted {
 /* Pure Data Patch Window (aka canvas) */

 /* patch font and background color. (Note: margin needs to stay at zero.) */
-#patch_body {
-    margin: 0px;
-    font-family: "DejaVu Sans Mono";
+.patch_body {
    background-color: black;
 }

@@ -353,13 +354,17 @@ text {

 /* Common to all dialogs */

+.dialog_body {
+    font-family: "DejaVu Sans", sans-serif;
+    background-color: #f3f3f3;
+}
+
 .submit_buttons {
    text-align: center;
    padding: 8px;
 }

 fieldset {
-    font-family:Georgia;
    background-color:#eeeeee;
    border-radius:3px;
    border:2px solid black;
@@ -378,11 +383,6 @@ fieldset {

 /* Iemgui dialog */

-#iemgui_dialog_body {
-    font-family:Verdana;
-    margin: 0px;
-}
-
 input[type="text"]{
    width:3em;
 }
@@ -472,12 +472,7 @@ div.y2 {
    height: 100vh;
 }

-#prefs_body {
-    margin-left: 0px;
-    margin-right: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-/*    height: 100%; */
+.prefs_body {
    padding: 0px;
 }


--- a/pd/nw/css/strongbad.css
+++ b/pd/nw/css/strongbad.css
 /* Global CSS */

+/*
 @font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../DejaVuSansMono.ttf");
 }
+*/
+
+body {
+    margin: 0px;
+    font-family: "DejaVu Sans Mono";
+}

 .noselect {
    -webkit-touch-callout: none;
@@ -21,10 +28,6 @@

 /* The main Pd Window */

-#console_body {
-    margin: 0px;
-}
-
 #console_controls {
    background-color: LightGray;
    height: 50px; 
@@ -94,9 +97,7 @@ mark.console_find_highlighted {
 /* Pure Data Patch Window (aka canvas) */

 /* patch font and background color. (Note: margin needs to stay at zero.) */
-#patch_body {
-    margin: 0px;
-    font-family: "DejaVu Sans Mono";
+.patch_body {
    background-color: black;
 }

@@ -335,13 +336,17 @@ text {

 /* Common to all dialogs */

+.dialog_body {
+    font-family: "DejaVu Sans", sans-serif;
+    background-color: #f3f3f3;
+}
+
 .submit_buttons {
    text-align: center;
    padding: 8px;
 }

 fieldset {
-    font-family:Georgia;
    background-color:#eeeeee;
    border-radius:3px;
    border:2px solid black;
@@ -360,11 +365,6 @@ fieldset {

 /* Iemgui dialog */

-#iemgui_dialog_body {
-    font-family:Verdana;
-    margin: 0px;
-}
-
 input[type="text"]{
    width:3em;
 }
@@ -454,12 +454,7 @@ div.y2 {
    height: 100vh;
 }

-#prefs_body {
-    margin-left: 0px;
-    margin-right: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-/*    height: 100%; */
+.prefs_body {
    padding: 0px;
 }


--- a/pd/nw/css/subdued.css
+++ b/pd/nw/css/subdued.css
 /* Global CSS */

+/*
 @font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../DejaVuSansMono.ttf");
 }
+*/
+
+body {
+    margin: 0px;
+    font-family: "DejaVu Sans Mono";
+}

 .noselect {
    -webkit-touch-callout: none;
@@ -21,10 +28,6 @@

 /* The main Pd Window */

-#console_body {
-    margin: 0px;
-}
-
 #console_controls {
    background-color: LightGray;
    height: 50px; 
@@ -94,9 +97,7 @@ mark.console_find_highlighted {
 /* Pure Data Patch Window (aka canvas) */

 /* patch font and background color. (Note: margin needs to stay at zero.) */
-#patch_body {
-    margin: 0px;
-    font-family: "DejaVu Sans Mono";
+.patch_body {
    background-color:  #c0dcc0;
 }

@@ -334,13 +335,17 @@ text {

 /* Common to all dialogs */

+.dialog_body {
+    font-family: "DejaVu Sans", sans-serif;
+    background-color: #f3f3f3;
+}
+
 .submit_buttons {
    text-align: center;
    padding: 8px;
 }

 fieldset {
-    font-family:Georgia;
    background-color:#eeeeee;
    border-radius:3px;
    border:2px solid black;
@@ -359,11 +364,6 @@ fieldset {

 /* Iemgui dialog */

-#iemgui_dialog_body {
-    font-family:Verdana;
-    margin: 0px;
-}
-
 input[type="text"]{
    width:3em;
 }
@@ -453,12 +453,7 @@ div.y2 {
    height: 100vh;
 }

-#prefs_body {
-    margin-left: 0px;
-    margin-right: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-/*    height: 100%; */
+.prefs_body {
    padding: 0px;
 }


--- a/pd/nw/css/vanilla.css
+++ b/pd/nw/css/vanilla.css
 /* Global CSS */

+/*
 @font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../DejaVuSansMono.ttf");
 }
+*/
+
+body {
+    margin: 0px;
+    font-family: "DejaVu Sans Mono";
+}

 .noselect {
    -webkit-touch-callout: none;
@@ -21,10 +28,6 @@

 /* The main Pd Window */

-#console_body {
-    margin: 0px;
-}
-
 #console_controls {
    background-color: LightGray;
    height: 50px; 
@@ -88,9 +91,7 @@ mark.console_find_highlighted {
 /* Pure Data Patch Window (aka canvas) */

 /* canvas font and background color. (Note: margin needs to stay at zero.) */
-#patch_body {
-    margin: 0px;
-    font-family: "DejaVu Sans Mono";
+.patch_body {
    background-color: white;
 }

@@ -328,13 +329,17 @@ text {

 /* Common to all dialogs */

+.dialog_body {
+    font-family: "DejaVu Sans", sans-serif;
+    background-color: #f3f3f3;
+}
+
 .submit_buttons {
    text-align: center;
    padding: 8px;
 }

 fieldset {
-    font-family:Georgia;
    background-color:#eeeeee;
    border-radius:3px;
    border:2px solid black;
@@ -353,11 +358,6 @@ fieldset {

 /* Iemgui dialog */

-#iemgui_dialog_body {
-    font-family:Verdana;
-    margin: 0px;
-}
-
 input[type="text"]{
    width:3em;
 }
@@ -447,12 +447,7 @@ div.y2 {
    height: 100vh;
 }

-#prefs_body {
-    margin-left: 0px;
-    margin-right: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-/*    height: 100%; */
+.prefs_body {
    padding: 0px;
 }


--- a/pd/nw/css/vanilla_inverted.css
+++ b/pd/nw/css/vanilla_inverted.css
 /* Global CSS */

+/*
 @font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../DejaVuSansMono.ttf");
 }
+*/
+
+body {
+    margin: 0px;
+    font-family: "DejaVu Sans Mono";
+}

 .noselect {
    -webkit-touch-callout: none;
@@ -21,10 +28,6 @@

 /* The main Pd Window */

-#console_body {
-    margin: 0px;
-}
-
 #console_controls {
    background-color: LightGray;
    height: 50px; 
@@ -94,9 +97,7 @@ mark.console_find_highlighted {
 /* Pure Data Patch Window (aka canvas) */

 /* canvas font and background color. (Note: margin needs to stay at zero.) */
-#patch_body {
-    margin: 0px;
-    font-family: "DejaVu Sans Mono";
+.patch_body {
    background-color: black;
 }

@@ -333,13 +334,17 @@ text {

 /* Common to all dialogs */

+.dialog_body {
+    font-family: "DejaVu Sans", sans-serif;
+    background-color: #f3f3f3;
+}
+
 .submit_buttons {
    text-align: center;
    padding: 8px;
 }

 fieldset {
-    font-family:Georgia;
    background-color:#eeeeee;
    border-radius:3px;
    border:2px solid black;
@@ -358,11 +363,6 @@ fieldset {

 /* Iemgui dialog */

-#iemgui_dialog_body {
-    font-family:Verdana;
-    margin: 0px;
-}
-
 input[type="text"]{
    width:3em;
 }
@@ -452,12 +452,7 @@ div.y2 {
    height: 100vh;