Merge pull request #22 from Troush/fallback-fonts

Use the SIL Unicode BMP Fallback Font

css/styles.css

@@ -1,3 +1,11 @@
+@font-face {
+    font-family: "Unicode BMP Fallback";
+    src: url(../fonts/UnicodeBMPFallback.ttf) format("opentype");
+}
+@font-face {
+    font-family: "Adobe Blank";
+    src: url(../fonts/AdobeBlank.otf) format("opentype");
+}
 body { background: white; color: black; }
 section { display: block; float: left; margin: 0; width: 100%; }
 h1, h2, h3, h4 { font-family: arial, sans-serif; font-weight: normal; }

index.html

@@ -129,6 +129,14 @@
 				   <input type="checkbox" id="ss20" onchange="refreshFeatures()">ss20</input><br/>
 				</td>
 			</tr>
+			<tr>
+				<td colspan="4" valign="top">
+				   <label for="unicodebmp">Fallback Font</label>
+				   <input type="radio" checked id="unicodebmp" name="fallback" onchange="refreshFeatures()">Unicode BMP Fallback Font</input> &nbsp;
+				   <input type="radio" id="adobeblank" name="fallback" onchange="refreshFeatures()">Adobe Blank</input> &nbsp;
+				   <input id="fallbackfont" type="text" style="display:none" />
+				</td>
+			</tr>
 			<tr>
 				<td colspan="3">
 					<p style="margin: 0 0 6px;">Recommended CSS:</p>
@@ -414,10 +422,10 @@
 				<p class="sizelabel">28px</p>
 				<p class="hints-lower" style="font-size: 28px;"></p>
 				<p style="font-size: 28px;">
-					<span class="hints-caps"></span> 
+					<span class="hints-caps"></span>
 					<span class="hints-numbers"></span>
 				</p><p>&nbsp;</p>
-				
+
         <script>
           var hintSizeDiv = $("#hinting");
           for (var i = 24; i >= 9; i--) {

js/fontdrag.js

@@ -1,7 +1,7 @@
 /*
 * font dragr v1.5
 * http://www.thecssninja.com/javascript/font-dragr
-* Copyright (c) 2010 Ryan Seddon 
+* Copyright (c) 2010 Ryan Seddon
 * released under the MIT License
 */
 var TCNDDF = TCNDDF || {};
@@ -20,7 +20,7 @@ contentStorageTimer;
 
 TCNDDF.setup = function () {
 dropListing = document.getElementById("fonts");
-dropContainer = document.getElementById("dropcontainer"); 
+dropContainer = document.getElementById("dropcontainer");
 displayContainer = document.getElementById("custom");
 styleSheet = document.styleSheets[0];
 
@@ -77,13 +77,13 @@ var reader = new FileReader();
 reader.name = name;
 reader.size = size;
 
-/* 
+/*
 Chrome 6 dev can't do DOM2 event based listeners on the FileReader object so fallback to DOM0
 http://code.google.com/p/chromium/issues/detail?id=48367
 reader.addEventListener("loadend", TCNDDF.buildFontListItem, false);
 */
 reader.onloadend = function (event) { TCNDDF.buildFontListItem(event); }
-reader.readAsDataURL(file); 
+reader.readAsDataURL(file);
 };
 
 TCNDDF.buildFontListItem = function (event) {
@@ -123,7 +123,9 @@ fontPreviewFragment.appendChild(domElements[0]);
 
 dropListing.appendChild(fontPreviewFragment);
 TCNDDF.updateActiveFont(domElements[0]);
-displayContainer.style.fontFamily = name;
+debugger;
+var fallbackfont = document.getElementById("fallbackfont").value;
+displayContainer.style.fontFamily = [name, fallbackfont].join(',');
 };
 
 /* Control changing of fonts in drop list  */
@@ -184,4 +186,4 @@ evt.returnValue = false;
 };
 
 window.addEventListener("load", TCNDDF.setup, false);
-})();
+})();

js/otfeatures.js

@@ -4,8 +4,8 @@
 * Released under the MIT License
 */
 
-// 
-// 
+//
+//
 //
 // CSS3 Syntax
 
@@ -16,13 +16,13 @@ function refreshFeatures() {
 	if (document.getElementById("kern")) codeCSS3 += !document.getElementById("kern").checked ? '"kern" off, ' : '"kern" on, ';
 	if (document.getElementById("liga")) codeCSS3 += !document.getElementById("liga").checked ? '"liga" off, ' : '"liga" on, ';
 	if (document.getElementById("calt")) codeCSS3 += !document.getElementById("calt").checked ? '"calt" off, ' : '"calt" on, ';
-	
+
 	if (document.getElementById("dlig")) codeCSS3 += !document.getElementById("dlig").checked ? '' : '"dlig", ';
 	if (document.getElementById("hlig")) codeCSS3 += !document.getElementById("hlig").checked ? '' : '"hlig", ';
-	
+
 	if (document.getElementById("swsh")) codeCSS3 += !document.getElementById("swsh").checked ? '' : '"swsh", ';
 	if (document.getElementById("salt")) codeCSS3 += !document.getElementById("salt").checked ? '' : '"salt", ';
-	
+
 	if (document.getElementById("ss01")) codeCSS3 += !document.getElementById("ss01").checked ? '' : '"ss01", ';
 	if (document.getElementById("ss02")) codeCSS3 += !document.getElementById("ss02").checked ? '' : '"ss02", ';
 	if (document.getElementById("ss03")) codeCSS3 += !document.getElementById("ss03").checked ? '' : '"ss03", ';
@@ -46,24 +46,25 @@ function refreshFeatures() {
 
 	if (document.getElementById("smcp")) codeCSS3 += !document.getElementById("smcp").checked ? '' : '"smcp", ';
 	if (document.getElementById("c2sc")) codeCSS3 += !document.getElementById("c2sc").checked ? '' : '"c2sc", ';
-	
+
 	if (document.getElementById("ordn")) codeCSS3 += !document.getElementById("ordn").checked ? '' : '"ordn", ';
 
 	if (document.getElementById("lnum")) codeCSS3 += !document.getElementById("lnum").checked ? '' : '"lnum", ';
 	if (document.getElementById("onum")) codeCSS3 += !document.getElementById("onum").checked ? '' : '"onum", ';
 	if (document.getElementById("tnum")) codeCSS3 += !document.getElementById("tnum").checked ? '' : '"tnum", ';
-	if (document.getElementById("pnum")) codeCSS3 += !document.getElementById("pnum").checked ? '' : '"pnum", ';	
+	if (document.getElementById("pnum")) codeCSS3 += !document.getElementById("pnum").checked ? '' : '"pnum", ';
 
 	if (document.getElementById("numr")) codeCSS3 += !document.getElementById("numr").checked ? '' : '"numr", ';
 	if (document.getElementById("dnom")) codeCSS3 += !document.getElementById("dnom").checked ? '' : '"dnom", ';
 	if (document.getElementById("sups")) codeCSS3 += !document.getElementById("sups").checked ? '' : '"sups", ';
 	if (document.getElementById("sinf")) codeCSS3 += !document.getElementById("sinf").checked ? '' : '"sinf", ';
-		
+
 	if (document.getElementById("frac")) codeCSS3 += !document.getElementById("frac").checked ? '' : '"frac", ';
 	if (document.getElementById("zero")) codeCSS3 += !document.getElementById("zero").checked ? '' : '"zero", ';
-
+
+
 	codeCSS3 = codeCSS3.substring(0, codeCSS3.length - 2);
-	
+
 	// Special Case for Fake Small Caps
 	var fakeSC = !document.getElementById("fake-smcp").checked ? 'normal' : 'small-caps';
 
@@ -76,13 +77,20 @@ function refreshFeatures() {
 	recommendedCSS += "-ms-font-feature-settings: " + codeCSS3 + "<br/>";
 	recommendedCSS += "-o-font-feature-settings: " + codeCSS3 ;
     $('#csscode').html( recommendedCSS );
-	
+
 	// Apply the Code
 	$('#custom').css("font-variant", fakeSC );
 	$('#custom').css("font-feature-settings", codeCSS3 );
 	$('#custom').css("-moz-font-feature-settings", codeCSS3 );
 	$('#custom').css("-webkit-font-feature-settings", codeCSS3 );
 	$('#custom').css("-ms-font-feature-settings", codeCSS3 );
 	$('#custom').css("-o-font-feature-settings", codeCSS3 );
-
-};	
+
+	var fallbackfont = document.getElementById("fallbackfont");
+	fallbackfont.value = (document.getElementById("unicodebmp").checked ? 'Unicode BMP Fallback' : 'Adobe Blank');
+	var fontFamily = $('#custom').css('font-family').split(',');
+	if (fontFamily.length > 1) {
+		fontFamily[1] = fallbackfont.value;
+		$('#custom').css('font-family', fontFamily.join(','));
+	}
+};