Page MenuHomePhabricator

Font substitution for SVG file to PNG thumbnail replaces serif with sans-serif font
Closed, DuplicatePublicBUG REPORT

Description

Note that the logo overlaps part of the date. Also the 2nd line of text extends off the image:

Bug report. Logo overlapping date in Wikimedia map.png (1×1 px, 313 KB)

Commons:File:World map of total confirmed COVID-19 deaths per million people by country.svg
There are many more examples of problems with MediaWiki substituting a font with wider characters and spacing for a narrower font. And not just maps. It would be better if MediaWiki substituted the narrower Liberation Sans by default instead of DejaVu Sans or other wider fonts.

Our World in Data (OWID) already fixed this once. See OWID's March 2023 Github thread:
In SVG exports, use a font selection that is better suitable for Wikipedia.

More info and other ideas:
Wikipedia:Village pump (technical)/Archive 207#Provide option to block font substitution on an SVG image.
Wikipedia:SVG help/Archive 10#Why are long OWID SVG map captions being overlapped by logo again?

Event Timeline

Removing SVG tag; please see its description.

The SVG file defines "font-family:'Playfair Display', Georgia, 'Times New Roman', 'Liberation Serif', serif" so I'm more confused that the PNG thumbnail has a sans-serif font?

Aklapper renamed this task from Change in SVG font substitution is messing up images to Font substitution for SVG file to PNG thumbnail replaces sans-serif with serif font.Aug 20 2023, 3:11 AM
Aklapper renamed this task from Font substitution for SVG file to PNG thumbnail replaces sans-serif with serif font to Font substitution for SVG file to PNG thumbnail replaces serif with sans-serif font.

I hadn't noticed that the title was originally a serif font outside Wikimedia!

The file checker at Commons:Commons SVG Checker said this about the SVG map file:

"WARNING: XML declaration not found and is strongly recommended"

Someone in a thread previously linked said: "Some SVG processors tolerate its absence, but not all, so it's best included."

By the way, if checking via file name do not include "File:"

I tried uploading the latest version of the map and it wouldn't allow it:
"Upload warning. Found unsafe CSS in the style element of uploaded SVG file."

In the file checker there is an additional message:

"ERROR in <style>: It will not be rendered properly by Wikimedia's SVG renderer. As workaround add attribute type="text/css" to <style>. See https://phabricator.wikimedia.org/T68672 for details."

User:Redrose64 wrote in the SVG Help thread: "this means that you should use <style type="text/css"> everywhere that you have used a plain <style> tag. It's documented at c:Help:SVG#Stylesheet as a known quirk of librsvg."

I uploaded the latest map file to
https://validator.w3.org/#validate_by_upload - and got these results:

Errors found while checking this document as SVG 1.1 + URL + HTML + MathML 3.0!
2 Errors, 1 warning(s) 

Notes and Potential Issues

The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation, or other things affecting the output below. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document.

No Character encoding declared at document level
No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.

See this tutorial on character encoding for techniques and explanations.

Validation Output: 2 Errors

  Error Line 1, Column 859: Attribute className not allowed on SVG element svg at this point.
  …ght="120" viewBox="0 0 210 120" fill="none" xmlns="http://www.w3.org/2000/svg">

  Error Line 13, Column 1427: Text not allowed in SVG element g in this context.
  …-58.7012451584917,94.85389963388164)">0<g class="noDataFeatures"><defs><patter…

Someone who knows what they are doing (not me) should fix all this stuff in the latest map file (the one that is blocked from uploading to the Commons) and see if it also solves the main task problem concerning font substitution.

Then contact OWID as I have done in the past:
https://ourworldindata.org/about#contact

It is worth doing all this because all of their images are CC-BY, and they also make available their free open-source software:
https://ourworldindata.org/owid-grapher

Their are already many OWID images on the Commons. Many are regularly updated. So the problems need to be fixed so that their uploads are not blocked.

I sent an email to info@ourworldindata.org and pointed them to this task.

The font specification is done with

style="font-family:Lato, &#x27;Helvetica Neue&#x27;, Helvetica, Arial, &#x27;Liberation Sans&#x27;, sans-serif;font-size:18px;background-color:white;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased"
style="font-family:&#x27;Playfair Display&#x27;, Georgia, &#x27;Times New Roman&#x27;, &#x27;Liberation Serif&#x27;, serif"

That has font fallbacks to Liberation Sans, but it may hit a font substitution for Helvetica or Arial before that. The main title should be showing a serif font, but it does not. The problem is deeper.

In the past, librsvg has had trouble with quotation marks within style attributes, so I removed the &#x27; characters, but it did not help.

Looking further, that Gnome fix is expecting a single font (no fallback font processing).

Searching Gnome bugs turns up

which describes no font fallback in librsvg. Issue is now closed, but the bug report and fix is 3 years old.

@Aklapper identified incomplete phab issue T64986.

So this issue is a result of switching from a recent librsvg 2.40 (which handles fallbacks) to the 5-year old librsvg 2.44 (which does not).

Our current version of librsvg 2.44.10 is not processing font fallbacks. See T265549.

According to the Gnome issue, we need to upgrade to at least librsvg 2.48.5.

Thanks for the analysis! That makes it technically a duplicate of T64986, it seems (same upstream ticket fixed in 2.48.5).