mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-29 07:37:57 +02:00
Most working, but once you add the font-css file to the web page, there is no font drawn at all
This commit is contained in:
parent
f346014c12
commit
a8dcb0dcd6
5 changed files with 235 additions and 108 deletions
146
fonts.js
146
fonts.js
|
@ -759,91 +759,109 @@ var Font = (function () {
|
|||
var data = this.font;
|
||||
var fontName = this.name;
|
||||
|
||||
var isWorker = (typeof window == "undefined");
|
||||
/** Hack begin */
|
||||
if (!isWorker) {
|
||||
|
||||
// Actually there is not event when a font has finished downloading so
|
||||
// the following code are a dirty hack to 'guess' when a font is ready
|
||||
var canvas = document.createElement("canvas");
|
||||
var style = "border: 1px solid black; position:absolute; top: " +
|
||||
(debug ? (100 * fontCount) : "-200") + "px; left: 2px; width: 340px; height: 100px";
|
||||
canvas.setAttribute("style", style);
|
||||
canvas.setAttribute("width", 340);
|
||||
canvas.setAttribute("heigth", 100);
|
||||
document.body.appendChild(canvas);
|
||||
// Actually there is not event when a font has finished downloading so
|
||||
// the following code are a dirty hack to 'guess' when a font is ready
|
||||
var canvas = document.createElement("canvas");
|
||||
var style = "border: 1px solid black; position:absolute; top: " +
|
||||
(debug ? (100 * fontCount) : "-200") + "px; left: 2px; width: 340px; height: 100px";
|
||||
canvas.setAttribute("style", style);
|
||||
canvas.setAttribute("width", 340);
|
||||
canvas.setAttribute("heigth", 100);
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
// Get the font size canvas think it will be for 'spaces'
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
|
||||
var testString = " ";
|
||||
// Get the font size canvas think it will be for 'spaces'
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
|
||||
var testString = " ";
|
||||
|
||||
// When debugging use the characters provided by the charsets to visually
|
||||
// see what's happening instead of 'spaces'
|
||||
var debug = false;
|
||||
if (debug) {
|
||||
var name = document.createElement("font");
|
||||
name.setAttribute("style", "position: absolute; left: 20px; top: " +
|
||||
(100 * fontCount + 60) + "px");
|
||||
name.innerHTML = fontName;
|
||||
document.body.appendChild(name);
|
||||
// When debugging use the characters provided by the charsets to visually
|
||||
// see what's happening instead of 'spaces'
|
||||
var debug = false;
|
||||
if (debug) {
|
||||
var name = document.createElement("font");
|
||||
name.setAttribute("style", "position: absolute; left: 20px; top: " +
|
||||
(100 * fontCount + 60) + "px");
|
||||
name.innerHTML = fontName;
|
||||
document.body.appendChild(name);
|
||||
|
||||
// Retrieve font charset
|
||||
var charset = Fonts[fontName].properties.charset || [];
|
||||
// Retrieve font charset
|
||||
var charset = Fonts[fontName].properties.charset || [];
|
||||
|
||||
// if the charset is too small make it repeat a few times
|
||||
var count = 30;
|
||||
while (count-- && charset.length <= 30)
|
||||
charset = charset.concat(charset.slice());
|
||||
// if the charset is too small make it repeat a few times
|
||||
var count = 30;
|
||||
while (count-- && charset.length <= 30)
|
||||
charset = charset.concat(charset.slice());
|
||||
|
||||
for (var i = 0; i < charset.length; i++) {
|
||||
var unicode = GlyphsUnicode[charset[i]];
|
||||
if (!unicode)
|
||||
continue;
|
||||
testString += String.fromCharCode(unicode);
|
||||
}
|
||||
for (var i = 0; i < charset.length; i++) {
|
||||
var unicode = GlyphsUnicode[charset[i]];
|
||||
if (!unicode)
|
||||
continue;
|
||||
testString += String.fromCharCode(unicode);
|
||||
}
|
||||
|
||||
ctx.fillText(testString, 20, 20);
|
||||
}
|
||||
ctx.fillText(testString, 20, 20);
|
||||
}
|
||||
|
||||
// Periodicaly check for the width of the testString, it will be
|
||||
// different once the real font has loaded
|
||||
var textWidth = ctx.measureText(testString).width;
|
||||
// Periodicaly check for the width of the testString, it will be
|
||||
// different once the real font has loaded
|
||||
var textWidth = ctx.measureText(testString).width;
|
||||
|
||||
var interval = window.setInterval(function canvasInterval(self) {
|
||||
this.start = this.start || Date.now();
|
||||
ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
|
||||
var interval = window.setInterval(function canvasInterval(self) {
|
||||
this.start = this.start || Date.now();
|
||||
ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
|
||||
|
||||
// For some reasons the font has not loaded, so mark it loaded for the
|
||||
// page to proceed but cry
|
||||
if ((Date.now() - this.start) >= kMaxWaitForFontFace) {
|
||||
window.clearInterval(interval);
|
||||
Fonts[fontName].loading = false;
|
||||
warn("Is " + fontName + " for charset: " + charset + " loaded?");
|
||||
this.start = 0;
|
||||
} else if (textWidth != ctx.measureText(testString).width) {
|
||||
window.clearInterval(interval);
|
||||
Fonts[fontName].loading = false;
|
||||
this.start = 0;
|
||||
}
|
||||
// For some reasons the font has not loaded, so mark it loaded for the
|
||||
// page to proceed but cry
|
||||
if ((Date.now() - this.start) >= kMaxWaitForFontFace) {
|
||||
window.clearInterval(interval);
|
||||
Fonts[fontName].loading = false;
|
||||
warn("Is " + fontName + " for charset: " + charset + " loaded?");
|
||||
this.start = 0;
|
||||
} else if (textWidth != ctx.measureText(testString).width) {
|
||||
window.clearInterval(interval);
|
||||
Fonts[fontName].loading = false;
|
||||
this.start = 0;
|
||||
}
|
||||
|
||||
if (debug)
|
||||
ctx.fillText(testString, 20, 50);
|
||||
}, 30, this);
|
||||
if (debug)
|
||||
ctx.fillText(testString, 20, 50);
|
||||
}, 30, this);
|
||||
}
|
||||
|
||||
/** Hack end */
|
||||
|
||||
//
|
||||
// Get the base64 encoding of the binary font data
|
||||
var str = "";
|
||||
var length = data.length;
|
||||
for (var i = 0; i < length; ++i)
|
||||
str += String.fromCharCode(data[i]);
|
||||
|
||||
var base64 = window.btoa(str);
|
||||
if (isWorker) {
|
||||
postMessage("font");
|
||||
postMessage(JSON.stringify({
|
||||
str: str,
|
||||
mimetype: this.mimetype,
|
||||
fontName: fontName,
|
||||
}));
|
||||
|
||||
// Add the @font-face rule to the document
|
||||
var url = "url(data:" + this.mimetype + ";base64," + base64 + ");";
|
||||
var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}";
|
||||
var styleSheet = document.styleSheets[0];
|
||||
styleSheet.insertRule(rule, styleSheet.length);
|
||||
setTimeout(function() {
|
||||
Fonts[fontName].loading = false;
|
||||
}, kMaxWaitForFontFace);
|
||||
} else {
|
||||
var base64 = window.btoa(str);
|
||||
|
||||
// Add the @font-face rule to the document
|
||||
var url = "url(data:" + this.mimetype + ";base64," + base64 + ");";
|
||||
var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}";
|
||||
var styleSheet = document.styleSheets[0];
|
||||
styleSheet.insertRule(rule, styleSheet.length);
|
||||
console.log("added font", fontName);
|
||||
console.log(rule);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue