Some rendered text can exceed calculated bounds.

The apparent issue is that titles get truncated in certain languages when padding is set to zero.

This is likely because the bounding box calculation for text marks is using some heuristics that doesn’t generalize to all languages.

Example spec to reproduce:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "title": "Hello World สวัสดีชาวโลก",
  "padding": 0
}

Expecting the Thai characters to look like:

But instead seeing:

on macOS with latest Chrome.

[kanitw]

FWIW, this might be an issue specific to Thai typography since it can have two levels of ascending characters. Consider the following three sets of characters, containing 1-3 characters respectively: ด,​ ดี, ดิ์.

The occurences of two level of ascending character are actually not rare (and is perhaps quite important as my last name (วงศ์ศุภสวัสดิ์) also has it lol) .

[jheer]

Bounding box height for text in Vega is calculated using the specified pixel height directly. No other tricks or heuristics. Can you first verify whether browsers respects the provided text height setting? For example if a client specifies “12px” as the text size, does the resulting Thai text respect that?

Looking at the image you shared, it appears that the Thai text has annotations that exceed the requested font size. If that is indeed the case, it would be useful to find a standards document that describes how browsers / CSS are supposed to handle pixel-based font size units.