linebender / linebender/resvg

Support font synthesis?

Open
#297 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

usvg
Dominant language
Rust
Stars
4.1k
Forks
348
Avg merge
1d 14h
Merged PRs (30d)
3

Description

As you know (OpenShot/openshot-qt#3462) we're using resvg in OpenShot to render our SVG title templates. One of the things that's been causing issues for some of our users is font styling, specifically the inability to apply certain styles to the text and have it render as expected.

A major barrier to meeting their needs on that front seems to be the lack of support for synthesized font styles. Here's a simple reproducer. Take this complete SVG code:
```svg

```

When viewed in Chrome or Firefox (at least), this will render as the text "A bold design." in 12-point italic Impact font. When run through ImageMagick's `convert -background none drawing.svg drawing.png` (using Inkscape as the rendering delegate), it will produce the following image:

![drawing](https://user-images.githubusercontent.com/538020/83988421-26e06600-a911-11ea-932b-008c8c0ed40d.png)

But, when converted by `rendersvg` or viewed in `viewsvg`, you get this:

![drawing_rendersvg](https://user-images.githubusercontent.com/538020/83989613-f995b700-a914-11ea-98aa-13dc1acac863.png)

The rub here is that the Impact typeface **_does not have_** an italic font. There is no way to download Impact Italic as a TTF or OTF font file (at least, not an official one), and if you open the "Text and Font" options pane in Inkscape, the only Style that will normally come up is "Condensed Regular".

However, if you enter a line of Impact text in Inkscape, then hit Ctrl+i, the text will be italicized nonetheless. And if you were to save that to SVG and later re-load it into Inkscape, you'd see that "Italic" has been _added_ as a Style option for Impact.

The key to this magic is a feature supported by some (most?) browsers, and which is configurable (in some cases) via the CSS property [`font-synthesis`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis) (Mozilla documentation). The [documented](https://drafts.csswg.org/css-fonts-3/#propdef-font-synthesis) CSS Fonts Module Level 3 defaults for the property are `style weight`, meaning both Bold and Italic variations can be _created_ for any typeface that lacks them — which is why the synthetic variations are also accessible on-demand from Inkscape. However, this does not appear to be supported by resvg, which seems to render fonts effectively as though `style="font-synthesis:none;"` has been specified in all cases.

This is especially a problem for us, because we allow users to select their title font using Qt's font dialog — either the native platform one, if available, or the fallback built-in one. In either case that dialog (unlike Inkscape's Text and Font panel), knowing that synthesis is normally supported by the font renderer, will present the user with Bold and/or Italic style selections for **any** font, even the ones which don't support it natively. This then understandably confuses users when their text isn't rendered in the style they choose... but then when they switch typefaces, suddenly it is. I have not found any way to configure the font dialog(s) to display only intrinsic, and not synthesized, font options.

Is there any possibility of supporting synthesized type styles in resvg?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the supplied SVG with rendersvg and viewsvg, then compare the result with Chrome, Firefox, or Inkscape. Investigate how resvg handles the CSS font-synthesis property and synthetic bold or italic styles; done means supported synthesis matches the documented default behavior for fonts without those variants.

Written by the indexing model from the issue text.

Assessment

Tech stack
rust
Domain
computer-graphics
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.