FontWarnings.js (12604B)
1 /* -*- Mode: Javascript; indent-tabs-mode:nil; js-indent-level: 2 -*- */ 2 /* vim: set ts=2 et sw=2 tw=80: */ 3 4 /************************************************************* 5 * 6 * MathJax/extensions/FontWarnings.js 7 * 8 * Implements a font warning message window that appears when 9 * the image fonts, no fonts, or web fonts are used, informing 10 * the user where to download the fonts, or to update to a more 11 * modern browser. The window will fade out automatically after 12 * a time, and the user can dismiss it by a close box. 13 * 14 * To include font warning messages, add "FontWarnings.js" to the 15 * extensions array in your MathJax configuration. 16 * 17 * You can customize the warning messages in a number of ways. Use the 18 * FontWarnings section of the configuration to specify any of the items 19 * shown in the CONFIG variable below. These include 20 * 21 * messageStyle the style to apply to the warning box that is 22 * displayed when MathJax uses one of its fallback 23 * methods. 24 * 25 * removeAfter the amount of time to show the warning message (in ms) 26 * fadeoutTime how long the message should take to fade out 27 * fadeoutSteps how many separate steps to use during the fade out 28 * (set to 0 to use no fadeout and simply remove the window) 29 * 30 * Messages stores the descriptions of the messages to use for the 31 * various warnings (webFonts, imageFonts, and noFonts). 32 * These are arrays of strings to be inserted into the window, 33 * or identifiers within brackets, which refer to the HTML 34 * snippets in the HTML section described below. To disable a 35 * specific message, set its value to null (see example below). 36 * 37 * HTML stores snippets of HTML descriptions for various 38 * common parts of the error messages. These include 39 * the closeBox, the message about web fonts being available 40 * in modern browser, and messages about downloadable fonts. 41 * The STIX and TeX font messages are used when only one 42 * of these is in the availableFonts list. The data for these 43 * are arrays of either strings to include or a description of 44 * an HTML item enclosed in square brackets. That description 45 * has (up to) three parts: the name of the tag to be included, 46 * a list (enclosed in braces) of attributes and their values 47 * to be set on the tag (optional), and an array of the contents 48 * of the tag (optional). See the definitions below for examples. 49 * 50 * For example, 51 * 52 * MathJax.Hub.Config({ 53 * ... 54 * extensions: ["FontWarnings.js"], 55 * FontWarnings: { 56 * removeAfter: 20*1000, // 20 seconds 57 * messageStyle: { 58 * border: "2px solid black", 59 * padding: "2em" 60 * }, 61 * Message: { 62 * webFont: null // no webfont messages (only image and no fonts) 63 * } 64 * } 65 * }); 66 * 67 * would extend the time the message is displayed from 12 seconds to 20, 68 * and changes the border to a solid black one, with 2em of padding 69 * rather than the default of 1em. 70 * 71 * --------------------------------------------------------------------- 72 * 73 * Copyright (c) 2010-2015 The MathJax Consortium 74 * 75 * Licensed under the Apache License, Version 2.0 (the "License"); 76 * you may not use this file except in compliance with the License. 77 * You may obtain a copy of the License at 78 * 79 * http://www.apache.org/licenses/LICENSE-2.0 80 * 81 * Unless required by applicable law or agreed to in writing, software 82 * distributed under the License is distributed on an "AS IS" BASIS, 83 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 84 * See the License for the specific language governing permissions and 85 * limitations under the License. 86 */ 87 88 (function (HUB,HTML) { 89 var VERSION = "2.6.0"; 90 91 var STIXURL = "http://www.stixfonts.org/"; 92 var MATHJAXURL = "https://github.com/mathjax/MathJax/tree/master/fonts/HTML-CSS/TeX/otf"; 93 94 var CONFIG = HUB.CombineConfig("FontWarnings",{ 95 // 96 // The CSS for the message window 97 // 98 messageStyle: { 99 position:"fixed", bottom:"4em", left:"3em", width:"40em", 100 border: "3px solid #880000", "background-color": "#E0E0E0", color: "black", 101 padding: "1em", "font-size":"small", "white-space":"normal", 102 103 "border-radius": ".75em", // Opera 10.5 and IE9 104 "-webkit-border-radius": ".75em", // Safari and Chrome 105 "-moz-border-radius": ".75em", // Firefox 106 "-khtml-border-radius": ".75em", // Konqueror 107 108 "box-shadow": "4px 4px 10px #AAAAAA", // Opera 10.5 and IE9 109 "-webkit-box-shadow": "4px 4px 10px #AAAAAA", // Safari 3 and Chrome 110 "-moz-box-shadow": "4px 4px 10px #AAAAAA", // Forefox 3.5 111 "-khtml-box-shadow": "4px 4px 10px #AAAAAA", // Konqueror 112 filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='gray', Positive='true')" // IE 113 }, 114 115 // 116 // The messages for the various situations 117 // 118 Message: { 119 120 webFont: [ 121 ["closeBox"], 122 ["webFont", 123 "MathJax is using web-based fonts to display the mathematics "+ 124 "on this page. These take time to download, so the page would "+ 125 "render faster if you installed math fonts directly in your "+ 126 "system's font folder."], 127 ["fonts"] 128 ], 129 130 imageFonts: [ 131 ["closeBox"], 132 ["imageFonts", 133 "MathJax is using its image fonts rather than local or web-based fonts. "+ 134 "This will render slower than usual, and the mathematics may not print "+ 135 "at the full resolution of your printer."], 136 ["fonts"], 137 ["webFonts"] 138 ], 139 140 noFonts: [ 141 ["closeBox"], 142 ["noFonts", 143 "MathJax is unable to locate a font to use to display "+ 144 "its mathematics, and image fonts are not available, so it "+ 145 "is falling back on generic unicode characters in hopes that "+ 146 "your browser will be able to display them. Some characters "+ 147 "may not show up properly, or possibly not at all."], 148 ["fonts"], 149 ["webFonts"] 150 ] 151 }, 152 153 // 154 // HTML objects that can be referred to in the message definitions 155 // 156 HTML: { 157 // 158 // The definition of the close box 159 // 160 closeBox: [[ 161 "div",{ 162 style: { 163 position:"absolute", overflow:"hidden", top:".1em", right:".1em", 164 border: "1px outset", width:"1em", height:"1em", 165 "text-align": "center", cursor: "pointer", 166 "background-color": "#EEEEEE", color:"#606060", 167 168 "border-radius": ".5em", // Opera 10.5 169 "-webkit-border-radius": ".5em", // Safari and Chrome 170 "-moz-border-radius": ".5em", // Firefox 171 "-khtml-border-radius": ".5em" // Konqueror 172 }, 173 onclick: function () { 174 if (DATA.div && DATA.fade === 0) 175 {if (DATA.timer) {clearTimeout(DATA.timer)}; DATA.div.style.display = "none"} 176 } 177 }, 178 [["span",{style:{position:"relative", bottom:".2em"}},["x"]]] 179 ]], 180 181 webFonts: [ 182 ["p"], 183 ["webFonts", 184 "Most modern browsers allow for fonts to be downloaded over the web. "+ 185 "Updating to a more recent version of your browser (or changing "+ 186 "browsers) could improve the quality of the mathematics on this page." 187 ] 188 ], 189 190 fonts: [ 191 ["p"], 192 ["fonts", 193 "MathJax can use either the [STIX fonts](%1) or the [MathJax TeX fonts](%2). " + 194 "Download and install one of those fonts to improve your MathJax experience.", 195 STIXURL,MATHJAXURL 196 ] 197 ], 198 199 STIXfonts: [ 200 ["p"], 201 ["STIXPage", 202 "This page is designed to use the [STIX fonts](%1). " + 203 "Download and install those fonts to improve your MathJax experience.", 204 STIXURL 205 ] 206 ], 207 208 TeXfonts: [ 209 ["p"], 210 ["TeXPage", 211 "This page is designed to use the [MathJax TeX fonts](%1). " + 212 "Download and install those fonts to improve your MathJax experience.", 213 MATHJAXURL 214 ] 215 ] 216 217 }, 218 219 removeAfter: 12*1000, // time to show message (in ms) 220 fadeoutSteps: 10, // fade-out steps 221 fadeoutTime: 1.5*1000 // fadeout over this amount of time (in ms) 222 223 }); 224 if (MathJax.Hub.Browser.isIE9 && document.documentMode >= 9) 225 {delete CONFIG.messageStyle.filter} 226 227 // 228 // Data for the window 229 // 230 var DATA = { 231 div: null, // the message window, when displayed 232 fade: 0 // number of fade-out steps so far 233 }; 234 235 // 236 // Create the message window and start the fade-out timer 237 // 238 var CREATEMESSAGE = function (data) { 239 if (DATA.div) return; 240 var HTMLCSS = MathJax.OutputJax["HTML-CSS"], frame = document.body; 241 if (HUB.Browser.isMSIE) { 242 if (CONFIG.messageStyle.position === "fixed") { 243 MathJax.Message.Init(); // make sure MathJax_MSIE_frame exists 244 frame = document.getElementById("MathJax_MSIE_Frame") || frame; 245 if (frame !== document.body) {CONFIG.messageStyle.position = "absolute"} 246 } 247 } else {delete CONFIG.messageStyle.filter} 248 CONFIG.messageStyle.maxWidth = (document.body.clientWidth-75) + "px"; 249 var i = 0; while (i < data.length) { 250 if (data[i] instanceof Array) { 251 if (data[i].length === 1 && CONFIG.HTML[data[i][0]]) { 252 data.splice.apply(data,[i,1].concat(CONFIG.HTML[data[i][0]])); 253 } else if (typeof data[i][1] === "string") { 254 var message = MathJax.Localization.lookupPhrase(["FontWarnings",data[i][0]],data[i][1]); 255 message = MathJax.Localization.processMarkdown(message,data[i].slice(2),"FontWarnings"); 256 data.splice.apply(data,[i,1].concat(message)); 257 i += message.length; 258 } else {i++} 259 } else {i++} 260 } 261 DATA.div = HTMLCSS.addElement(frame,"div", 262 {id:"MathJax_FontWarning",style:CONFIG.messageStyle},data); 263 MathJax.Localization.setCSS(DATA.div); 264 if (CONFIG.removeAfter) { 265 HUB.Register.StartupHook("End",function () 266 {DATA.timer = setTimeout(FADEOUT,CONFIG.removeAfter)}); 267 } 268 HTML.Cookie.Set("fontWarn",{warned:true}); 269 }; 270 271 // 272 // Set the opacity based on the number of steps taken so far 273 // and remove the window when it gets to 0 274 // 275 var FADEOUT = function () { 276 DATA.fade++; if (DATA.timer) {delete DATA.timer} 277 if (DATA.fade < CONFIG.fadeoutSteps) { 278 var opacity = 1 - DATA.fade/CONFIG.fadeoutSteps; 279 DATA.div.style.opacity = opacity; 280 DATA.div.style.filter = "alpha(opacity="+Math.floor(100*opacity)+")"; 281 setTimeout(FADEOUT,CONFIG.fadeoutTime/CONFIG.fadeoutSteps); 282 } else { 283 DATA.div.style.display = "none"; 284 } 285 }; 286 287 // 288 // Check that we haven't already issued a warning 289 // 290 if (!HTML.Cookie.Get("fontWarn").warned) { 291 // 292 // Hook into the Startup signal and look for font warning messages. 293 // When one comes, issue the correct message. 294 // 295 HUB.Startup.signal.Interest(function (message) { 296 if (message.match(/HTML-CSS Jax - /) && !DATA.div) { 297 var HTMLCSS = MathJax.OutputJax["HTML-CSS"], FONTS = HTMLCSS.config.availableFonts, MSG; 298 var localFonts = (FONTS && FONTS.length); 299 if (!localFonts) {CONFIG.HTML.fonts = [""]} 300 else if (FONTS.length === 1) {CONFIG.HTML.fonts = CONFIG.HTML[FONTS[0]+"fonts"]} 301 if (HTMLCSS.allowWebFonts) {CONFIG.HTML.webfonts = [""]} 302 if (message.match(/- Web-Font/)) {if (localFonts) {MSG = "webFont"}} 303 else if (message.match(/- using image fonts/)) {MSG = "imageFonts"} 304 else if (message.match(/- no valid font/)) {MSG = "noFonts"} 305 if (MSG && CONFIG.Message[MSG]) 306 {MathJax.Localization.loadDomain("FontWarnings",[CREATEMESSAGE,CONFIG.Message[MSG]])} 307 } 308 }); 309 } 310 311 })(MathJax.Hub,MathJax.HTML); 312 313 MathJax.Ajax.loadComplete("[MathJax]/extensions/FontWarnings.js");