Commit 9ca3e834 authored by David Schnur's avatar David Schnur

Use actual line height for canvas text rendering.

parent 825cd36e
...@@ -187,28 +187,30 @@ browser, but needs to redraw with canvas text when exporting as an image. ...@@ -187,28 +187,30 @@ browser, but needs to redraw with canvas text when exporting as an image.
// If the font was provided as CSS, create a div with those // If the font was provided as CSS, create a div with those
// classes and examine it to generate a canvas font spec. // classes and examine it to generate a canvas font spec.
// Note the trick of using a line-height of 1, without units;
// this sets it equal to the font-size, even if the font-size
// is something abstract, like 'smaller'. This enables us to
// read the real font-size via the element's height, working
// around browsers that return the literal 'smaller' value.
if (typeof font !== "object") { if (typeof font !== "object") {
var element = $("<div>&nbsp;</div>") var element = $("<div>&nbsp;</div>")
.css("position", "absolute")
.addClass(typeof font === "string" ? font : null) .addClass(typeof font === "string" ? font : null)
.css({ position: "absolute", padding: 0, 'line-height': 1 })
.appendTo(this.getTextLayer(layer)); .appendTo(this.getTextLayer(layer));
font = { font = {
lineHeight: element.height(),
style: element.css("font-style"), style: element.css("font-style"),
variant: element.css("font-variant"), variant: element.css("font-variant"),
weight: element.css("font-weight"), weight: element.css("font-weight"),
size: element.height(),
family: element.css("font-family"), family: element.css("font-family"),
color: element.css("color") color: element.css("color")
}; };
// Setting line-height to 1, without units, sets it equal
// to the font-size, even if the font-size is abstract,
// like 'smaller'. This enables us to read the real size
// via the element's height, working around browsers that
// return the literal 'smaller' value.
font.size = element.css("line-height", 1).height();
element.remove(); element.remove();
} }
...@@ -241,28 +243,15 @@ browser, but needs to redraw with canvas text when exporting as an image. ...@@ -241,28 +243,15 @@ browser, but needs to redraw with canvas text when exporting as an image.
for (var i = 0; i < lines.length; ++i) { for (var i = 0; i < lines.length; ++i) {
var lineText = lines[i], var lineText = lines[i],
measured = context.measureText(lineText), measured = context.measureText(lineText);
lineWidth, lineHeight;
lineWidth = measured.width;
// Height might not be defined; not in the standard yet
lineHeight = measured.height || font.size;
// Add a bit of margin since font rendering is not pixel
// perfect and cut off letters look bad. This also doubles
// as spacing between lines.
lineHeight += Math.round(font.size * 0.15);
info.width = Math.max(lineWidth, info.width); info.width = Math.max(measured.width, info.width);
info.height += lineHeight; info.height += font.lineHeight;
info.lines.push({ info.lines.push({
text: lineText, text: lineText,
width: lineWidth, width: measured.width,
height: lineHeight height: font.lineHeight
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment