|
|
|
@ -289,10 +289,13 @@ export const measureText = (
|
|
|
|
|
.map((x) => x || " ")
|
|
|
|
|
.join("\n");
|
|
|
|
|
const fontSize = parseFloat(font);
|
|
|
|
|
const height = getTextHeight(text, fontSize, lineHeight);
|
|
|
|
|
let height = getTextHeight(text, fontSize, lineHeight);
|
|
|
|
|
const width = getTextWidth(text, font);
|
|
|
|
|
const { baseline } = getDOMMetrics(text, font, lineHeight);
|
|
|
|
|
return { width, height, baseline };
|
|
|
|
|
const domMetrics = getDOMMetrics(text, font, lineHeight);
|
|
|
|
|
if (isSafari) {
|
|
|
|
|
height = domMetrics.height;
|
|
|
|
|
}
|
|
|
|
|
return { width, height, baseline: domMetrics.baseline };
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const getDOMMetrics = (
|
|
|
|
@ -313,7 +316,6 @@ export const getDOMMetrics = (
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
container.style.lineHeight = String(lineHeight);
|
|
|
|
|
const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);
|
|
|
|
|
|
|
|
|
|
container.innerText = text;
|
|
|
|
|
|
|
|
|
@ -326,23 +328,9 @@ export const getDOMMetrics = (
|
|
|
|
|
span.style.width = "1px";
|
|
|
|
|
span.style.height = "1px";
|
|
|
|
|
container.appendChild(span);
|
|
|
|
|
let baseline = span.offsetTop + span.offsetHeight;
|
|
|
|
|
const baseline = span.offsetTop + span.offsetHeight;
|
|
|
|
|
const height = container.offsetHeight;
|
|
|
|
|
|
|
|
|
|
if (isSafari) {
|
|
|
|
|
// In Safari sometimes DOM height could be less than canvas height due to
|
|
|
|
|
// which text could go out of the bounding box hence shifting the baseline
|
|
|
|
|
// to make sure text is rendered correctly
|
|
|
|
|
if (canvasHeight > height) {
|
|
|
|
|
baseline += canvasHeight - height;
|
|
|
|
|
}
|
|
|
|
|
// In Safari sometimes DOM height could be more than canvas height due to
|
|
|
|
|
// which text could go out of the bounding box hence shifting the baseline
|
|
|
|
|
// to make sure text is rendered correctly
|
|
|
|
|
if (height > canvasHeight) {
|
|
|
|
|
baseline -= height - canvasHeight;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
document.body.removeChild(container);
|
|
|
|
|
return { baseline, height };
|
|
|
|
|
};
|
|
|
|
|