Can container overflowing fonts be adjusted with css?

user_3909853 0
Viewed 59

I'm rendering a text svg using handwriting style google fonts. Assume that I must use these fonts.

For this example, lets use Princess Sofia

Setup

  • rendering text svg to png via cairo svg in python
  • text svg is being prepared in the browser

The Problem:

When creating a PNG out of the text svg with this font, some part of it is being cut off. The cut off part matches the areas that are not higlighted in the screenshot below: princess sofia characters

Rendering result for A (cut off in the screenshot):

letter P rendered

Rendering result for P (NOT cut off in the screenshot):

letter P rendered

Question

Is there a way to work around this using CSS or JS?

What won't work

  • "Kerning, stretching, font variants, word and letter spacing options, glyph orientations, baseline shifts and many other properties are not supported" by Cairo SVG
cairo fonts svg css html
1 Answers

It's difficult to quickly test this without seeing some code reproducing the problem.

However, this may be rectified by using font kerning which can be specified in CSS using the font-kerning property:

font-kerning: normal;

Setting font-kerning to normal achieves the following effect:

Font kerning information stored in the font must be applied.

The default is auto, which allows the browser to decide whether to use font kerning or not. Forcing it to normal means that the kerning specified in the font itself will be used.

The docs for font-kerning can be read here.

user_21697620
Related