From 2abe6c7e2734621655a903cd5bbdfc548361cf4c Mon Sep 17 00:00:00 2001
From: Jeff Carr <jcarr@wit.com>
Date: Wed, 29 Nov 2017 13:06:16 +0000
Subject: [PATCH] more font stuff

---
 detect_fonts.html       | 123 ++++++++++++++++++++++++++++++++++++++++
 index.nginx-debian.html |   4 ++
 2 files changed, 127 insertions(+)
 create mode 100644 detect_fonts.html
diff --git a/detect_fonts.html b/detect_fonts.html
new file mode 100644
index 0000000..2167eea
--- /dev/null
+++ b/detect_fonts.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>check.wit.com</title>
+<style>
+    body {
+        width: 100em;
+        margin: 0 auto;
+        font-family: Tahoma, Verdana, Arial, sans-serif;
+    }
+</style>
+</head>
+<body>
+<br>
+<br>
+<br>
+
+<script>
+
+// to add a font, you can do:
+// fonts = [ 'Arial', 'Arial Black', { family: 'Lato', stylesheetUrl: 'https://fonts.googleapis.com/css?family=Lato'}, 'Leelawadee UI']
+// (new FontDetector()).addFontsArr(fonts);
+
+/**
+ * JavaScript code to detect available availability of a
+ * particular font in a browser using JavaScript and CSS.
+ *
+ * Author : Lalit Patel
+ * Website: http://www.lalit.org/lab/javascript-css-font-detect/
+ * License: Apache Software License 2.0
+ *          http://www.apache.org/licenses/LICENSE-2.0
+ * Version: 0.15 (21 Sep 2009)
+ *          Changed comparision font to default from sans-default-default,
+ *          as in FF3.0 font of child element didn't fallback
+ *          to parent element if the font is missing.
+ * Version: 0.2 (04 Mar 2012)
+ *          Comparing font against all the 3 generic font families ie,
+ *          'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
+ *          then that font is 100% not available in the system
+ * Version: 0.3 (24 Mar 2012)
+ *          Replaced sans with serif in the list of baseFonts
+ */
+
+/**
+ * Usage: d = new Detector();
+ *        d.detect('font name');
+ */
+function FontDetector() {
+    this.detect = detect;
+    this.addFont = addFont;
+    this.addFontsArr = addFontsArr;
+
+    // a font will be compared against all the three default fonts.
+    // and if it doesn't match all 3 then that font is not available.
+    var baseFonts = ['monospace', 'sans-serif', 'serif'];
+
+    //we use m or w because these two characters take up the maximum width.
+    // And we use a LLi so that the same matching fonts can get separated
+    var testString = "mmmmmmmmmmlli";
+
+    //we test using 72px font size, we may use any size. I guess larger the better.
+    var testSize = '72px';
+
+    var h = document.getElementsByTagName("body")[0];
+
+    // create a SPAN in the document to get the width of the text we use to test
+    var s = document.createElement("span");
+    s.style.fontSize = testSize;
+    s.innerHTML = testString;
+    var defaultWidth = {};
+    var defaultHeight = {};
+    for (var index in baseFonts) {
+        //get the default width for the three base fonts
+        s.style.fontFamily = baseFonts[index];
+        h.appendChild(s);
+        defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
+        defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
+        h.removeChild(s);
+    }
+
+    function detect(font) {
+        var detected = false;
+        for (var index in baseFonts) {
+            s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
+            h.appendChild(s);
+            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
+            h.removeChild(s);
+            detected = detected || matched;
+        }
+        return detected;
+    }
+
+    function addFont(family, stylesheetUrl, ruleString) {
+        if (detect(family)) {
+            //console.log('using internal font '+family);
+            return true;
+        }
+        if (stylesheetUrl) {
+            console.log('added stylesheet '+stylesheetUrl);
+            var head = document.head, link = document.createElement('link');
+            link.type = 'text/css';
+            link.rel = 'stylesheet';
+            link.href = stylesheetUrl;
+            head.appendChild(link);
+            return true;          
+        }
+
+        if (ruleString) {
+            console.log('adding font rule:'+rule);
+            var newStyle = document.createElement('style');
+            newStyle.appendChild(document.createTextNode(rule));
+            document.head.appendChild(newStyle);
+            return true;
+        }
+
+        console.log('could not add font '+family);
+    }
+
+    function addFontsArr(arr) {
+        arr.forEach(a => typeof a==='string' ? addFont(a) : addFont(a.family, a.stylesheetUrl, a.ruleString));
+    }
+};
+</script>
diff --git a/index.nginx-debian.html b/index.nginx-debian.html
index f012b6f..03eec67 100644
--- a/index.nginx-debian.html
+++ b/index.nginx-debian.html
@@ -63,6 +63,10 @@ if (gl) {
 <a href="javascript3.html">java test3</a><br/>
 <a href="detect_gpu.html">dump javascript webgl info</a><br/>
 <a href="javascript_dump/">dump javascript info</a><br/>
+<a href="http://www.lalit.org/lab/javascript-css-font-detect/">javascript font detection</a><br/>
+<a href="https://www.bramstein.com/writing/detecting-system-fonts-without-flash.html">detecting fonts</a><br/>
+<a href="https://github.com/bramstein/fontfaceobserver/">Font Face Observer</a><br/>
+<a href="https://github.com/typekit/webfontloader">Web Font Loader</a><br/>
 
 <br>
 <FORM>
