Skip to content

HTML: Fixes to Custom Font Positioning #862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
scottrules44 merged 3 commits into from
Nov 4, 2025
Merged

HTML: Fixes to Custom Font Positioning #862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7fd75d6
HTML: Fixes to Custom Font Positioning
scottrules44 Oct 26, 2025
40feb77
Fixes for Chrome Bleed
scottrules44 Oct 29, 2025
595ff8c
Fixes
scottrules44 Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion platform/emscripten/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Buld test app & quick setup
# Build test app & quick setup

## Setting up
1. download [emscripten](http://emscripten.org) & unpack it
Expand Down
187 changes: 125 additions & 62 deletions platform/emscripten/Rtt_EmscriptenPlatform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -807,149 +807,212 @@ var platformLibrary =

var fontName = UTF8ToString(_fontName);
var a = fontName.split('/');
var fontName = a[a.length - 1]; // filename
fontName = a[a.length - 1]; // filename

var a = fontName.split('.');
a = fontName.split('.');
fontName = a[0];
var ext = a[1];

var canva = document.createElement('canvas');
canva.width = canvas.width;
canva.height = canvas.height;
canva.style.position = "absolute";
var ctx = canva.getContext("2d");

if (Module.isSafari) {
ctx.fillStyle = 'red';
}

// check if font exists
// the text whose final pixel size I want to measure
var testtext = "ABCM|abcdefghijklmnopqrstuvwxyz0123456789";

// specifying the baseline font
ctx.font = "72px monospace";

// checking the size of the baseline text
var baselineSize = ctx.measureText(testtext).width;

// specifying the font whose existence we want to check
ctx.font = "72px '" + fontName + "', monospace";

// checking the size of the font we want to check
var newSize = ctx.measureText(testtext).width;

// If the size of the two text instances is the same, the font does not exist because it is being rendered
fontExist = newSize != baselineSize;
var fontExist = newSize != baselineSize;

if (fontName === '' || fontExist == false) {
// console.log(fontName + ' not found, using sans-serif');
fontName = 'sans-serif'; // Default value
// console.log(fontName + ' not found, using sans-serif');
fontName = 'sans-serif';
}
ctx.font = String(fontSize) + 'px ' + fontName;

ctx.textBaseline = 'top';
// ensure font is loaded (prevents Firefox fallback metrics)
if (document.fonts && document.fonts.load) {
try {
document.fonts.load(fontSize + 'px "' + fontName + '"');
} catch (e) {
// ignore
}
}

ctx.font = String(fontSize) + 'px ' + fontName;
ctx.textAlign = alignment;
ctx.textBaseline = 'alphabetic'; // safer baseline across browsers

// measure proper font metrics for vertical alignment
var testMetrics = ctx.measureText("Mg'");

@Shchvova Shchvova Nov 4, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eh... sure

var ascent = testMetrics.actualBoundingBoxAscent || fontSize * 0.75;
var descent = testMetrics.actualBoundingBoxDescent || fontSize * 0.25;
var lineHeight = ascent + descent;

// Extra space for punctuation that extends above normal ascent
var topExtraPadding = fontSize * 0.2;

var a = measureText(testtext, false, fontName, fontSize);
var lineHeight = a[1];
// Anti-aliasing padding
var horizontalPadding = Math.ceil(fontSize * 0.15);

// calculate actual content dimensions first
var maxWidth = w;
var useFixedWidth = (w > 0);

if (w == 0) {
// calc width
// calc width dynamically
maxWidth = 0;
var line = '';
for (var i = 0; i < text.length; i++) {
if (text.charAt(i) == '\n') {
line = '';
}
else {
} else {
line += text.charAt(i);
var metrics = ctx.measureText(line);
if (metrics.width > w) {
w = metrics.width;
if (metrics.width > maxWidth) {
maxWidth = metrics.width;
}
}
}
// last line
var metrics = ctx.measureText(line);
w = Math.max(w, metrics.width);
maxWidth = Math.max(maxWidth, metrics.width);
}

var x = 0;
var y = 0;
if (alignment === 'right') {
x = w;
}
else
if (alignment === 'center') {
x = w / 2;
// count lines to calculate height
var lineCount = 1;
var line = '';
var effectiveMaxWidth = useFixedWidth ? (w - (horizontalPadding * 2)) : maxWidth;

for (var i = 0; i < text.length; i++) {
if (text.charAt(i) == '\n') {
lineCount++;
line = '';
} else {
var testLine = line + text.charAt(i);
var metrics = ctx.measureText(testLine);
if (metrics.width > effectiveMaxWidth) {
lineCount++;
if (text.charAt(i) === ' ') {
line = '';
} else {
var a = line.split(' ');
if (a.length > 1) {
line = a[a.length - 1] + text.charAt(i);
} else {
line = text.charAt(i);
}
}
} else {
line = testLine;
}
}
}

// calculate required dimensions with proper padding
var topPadding = topExtraPadding; // padding to prevent clipping
var calculatedHeight = (lineCount * lineHeight) + topPadding;
var calculatedWidth = maxWidth + (horizontalPadding * 2);

// set canvas to exact required size
canva.width = useFixedWidth ? w : Math.ceil(calculatedWidth);
canva.height = h > 0 ? h : Math.ceil(calculatedHeight);
canva.style.position = "absolute";

// re-apply font and styles after canvas resize (canvas resets context)
ctx.font = String(fontSize) + 'px ' + fontName;
ctx.textAlign = alignment;
ctx.textBaseline = 'alphabetic';

if (Module.isSafari) {
ctx.fillStyle = 'red';
}

// wrap text
var y = ascent + topPadding;
var x = 0;

if (alignment === 'left') {
x = horizontalPadding;
} else if (alignment === 'right') {
x = canva.width - horizontalPadding;
} else if (alignment === 'center') {
x = canva.width / 2;
}

var ww = 0;
var hh = 0;
// render text
var line = '';
for (var i = 0; i < text.length; i++) {
if (text.charAt(i) == '\n') {
ctx.fillText(line, x, y);
line = '';
y += lineHeight;
}
else {
} else {
var testLine = line + text.charAt(i);
var metrics = ctx.measureText(testLine);
if (metrics.width > w) {
if (metrics.width > effectiveMaxWidth) {
if (text.charAt(i) === ' ') {
// ignore last space
ctx.fillText(line, x, y);
line = '';
}
else {
} else {
// delete last uncomplete word if space exists
var a = line.split(' ');
if (a.length > 1) {
var line = a[a.length - 1] + text.charAt(i); // the beginning of next line
a.pop(); // remove last
if (a.length > 1) {
line = a[a.length - 1] + text.charAt(i); // beginning of next line
a.pop();
var s = a.join(' ');
ctx.fillText(s, x, y);
}
else{
// no words, draw line as is
} else {
// no words, draw line as is
ctx.fillText(line, x, y);
line = text.charAt(i); // the beginning of next line
line = text.charAt(i);
}
}
y += lineHeight;
}
else {
} else {
line = testLine;
}
}
}

// last line
ctx.fillText(line, x, y);
ctx.fillText(line, Math.round(x), Math.round(y));

hh = h > 0 ? h : y + lineHeight;
ww = w > 0 ? w : 1;
var ww = canva.width;
var hh = canva.height;

// it's needs for corona ?
// make width 4-byte aligned
if ((ww & 0x3) != 0) {
ww = (ww + 3) & -4;
}

//console.log('render: ', metrics, text, w, h, ww, hh, alignment, fontName, fontSize);
// console.log('render: ', text, w, h, ww, hh, alignment, fontName, fontSize);

var myImageData = ctx.getImageData(0, 0, ww, hh);
var myImageData = ctx.getImageData(0, 0, canva.width, canva.height);
var img = Module.jarray2carray(myImageData.data);
_jsEmscriptenBitmapSaveImage(thiz, myImageData.data.length, img, myImageData.width, myImageData.height, Module.isSafari);
_jsEmscriptenBitmapSaveImage(
thiz,
myImageData.data.length,
img,
myImageData.width,
myImageData.height,
Module.isSafari
);
_free(img);

//var body = document.getElementsByTagName("body")[0];
//body.appendChild(canva);
//canva.remove();
// optional debug
// var body = document.getElementsByTagName("body")[0];
// body.appendChild(canva);
// canva.remove();
},



jsContextSetClearColor: function(r, g, b, a)
{
var rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
Expand Down
Loading