Page MenuHomePhabricator

Show more symbols in pretty font
Open, Needs TriagePublic

Description

Math tags shows Cyrillic text and other characters in thin, angular font. At the same time, many Latin characters, and even Chinese and Arabic, appear in a thick, smooth, pretty font.

<math>\alpha=\text{АБабвгдрзЗABabcdgG电}</math>


https://wikimedia.org/api/rest_v1/media/math/render/svg/af46eeb097acda69d7aa45df102c4fa57d66058c

In Wikipedia with Cyrillic, we use a lot of text in formulas and formulas are shown from two different fonts, not as pretty as in other languages.

<math>V_\text{смеси}=V_\text{mixture}</math>


https://wikimedia.org/api/rest_v1/media/math/render/svg/1a5605fac5ee82585126078ed5f93113c4a37a1c

It is necessary that more text is displayed in a pretty font.

<math>\text{    Авар     Башҡортса     ГӀалгӀай     Ирон     Къарачай-малкъар     Лезги     Мокшень     Нохчийн     Олык марий     Саха тыла     Татарча/tatarça     Удмурт     Чӑвашла     Эрзянь     English     Հայերեն Всемирные     English     Español     Esperanto     Français     Ido     Interlingua     Interlingue     Lingua Franca Nova     La .lojban.     Novial     Português     Volapük Америка     Atikamekw     Avañe'ẽ     Aymar aru     Deitsch     English     Español     Français     Hawaiʻi     Iñupiak     Kalaallisut     Kreyòl ayisyen     Ladino     Nederlands     Nāhuatl     Papiamentu     Patois     Português     Runa Simi     Sranantongo     Tsetsêhestâhese     ייִדיש     ᐃᓄᒃᑎᑐᑦ/inuktitut     ᏣᎳᎩ Европа     Авар     Адыгабзэ     Аҧсшәа     Башҡортса     Беларуская     Беларуская (тарашкевіца)‎     Български     ГӀалгӀай     Ирон     Къарачай-малкъар     Кырык мары     Лакку     Лезги     Македонски     Мокшень     Нохчийн     Олык марий     Перем Коми     Русиньскый     Саха тыла     Словѣньскъ / ⰔⰎⰑⰂⰡⰐⰠⰔⰍⰟ     Српски / srpski     Татарча/tatarça     Удмурт     Українська     Хальмг     Чӑвашла     Эрзянь     Қазақша     Ελληνικά     Ποντιακά     Alemannisch     Aragonés     Armãneashti     Arpetan     Asturianu     Azərbaycanca     Boarisch     Bosanski     Brezhoneg     Català     Corsu     Cymraeg     Dansk     Davvisámegiella     Deitsch     Deutsch     Dolnoserbski     Eesti     Emiliàn e rumagnòl     English     Español     Estremeñu     Euskara     Français     Frysk     Furlan     Føroyskt     Gaeilge     Gaelg     Gagauz     Galego     Gàidhlig     Hornjoserbsce     Hrvatski     Italiano     Kalaallisut     Kaszëbsczi     Kernowek     Kurdî     Ladino     Latgaļu     Latina     Latviešu     Lietuvių     Ligure     Limburgs     Livvinkarjala     Lumbaart     Lëtzebuergesch     Magyar     Malti     Mirandés     Napulitano     Nederlands     Nedersaksies     Nordfriisk     Norsk     Norsk nynorsk}</math><math>\text{     Occitan     Picard     Piemontèis     Plattdüütsch     Polski     Português     Pälzisch     Qırımtatarca     Ripoarisch     Romani     Română     Rumantsch     Sardu     Scots     Seeltersk     Shqip     Sicilianu     Slovenčina     Slovenščina     Sranantongo     Srpskohrvatski / српскохрватски     Suomi     Svenska     Taqbaylit     Türkçe     Vepsän kel’     Vèneto     Võro     Walon     West-Vlams     Zazaki     Zeêuws     Ænglisc     Íslenska     Čeština     Ślůnski     Žemaitėška     𐌲𐌿𐍄𐌹𐍃𐌺     ייִדיש     Հայերեն     მარგალური     ქართული Ближний Восток     اردو     العربية     تۆرکجه     فارسی     مازِرونی     مصرى     پنجابی     پښتو     کوردی     گیلکی     Адыгабзэ     Azərbaycanca     English     Kurdî     Ladino     Türkçe     ייִדיש     עברית     ܐܪܡܝܐ     मराठी     മലയാളം     Հայերեն Африка     ትግርኛ     አማርኛ     Afrikaans     Akan     Bamanankan     Chi-Chewa     ChiShona     English     Español     Fulfulde     Gĩkũyũ     Hausa     Igbo     IsiXhosa     IsiZulu     Kabɩyɛ     Kiswahili     Lingála     Luganda     Malagasy     Oshiwambo     Português     Qafár af     Sesotho sa Leboa     Setswana     SiSwati     Soomaaliga     Sängö     Taqbaylit     Tshivenda     Twi     Wolof     Xitsonga     Yorùbá Азия     ئۇيغۇرچە / Uyghurche     اردو     }</math><math>\text{تۆرکجه     سنڌي     فارسی     مازِرونی     پنجابی     پښتو     कॉशुर / کٲشُر     گیلکی     中文     吴语     文言     日本語     粵語     贛語     한국어     Буряад     Кыргызча     Монгол     Саха тыла     Тоҷикӣ     Тыва дыл     Қазақша     Acèh     Bahasa Banjar     Bahasa Hulontalo     Bahasa Indonesia     Bahasa Melayu     Basa Jawa     Basa Sunda     Baso Minangkabau     Bikol Central     Bân-lâm-gú     Cebuano     English     客家語/Hak-kâ-ngî     Ilokano     Kapampangan     Livvinkarjala     Mìng-dĕ̤ng-ngṳ̄     Oʻzbekcha/ўзбекча     Pangasinan     Português     Qaraqalpaqsha     Tagalog     Tetun     Tiếng Việt     Tok Pisin     Türkmençe     Vahcuengh     Winaray     Zazaki     ދިވެހިބަސް     गोंयची कोंकणी / Gõychi Konknni     डोटेली     नेपाल भाषा     नेपाली     पालि     भोजपुरी     मराठी     मैथिली     संस्कृतम्     हिन्दी     অসমীয়া     বাংলা     বিষ্ণুপ্রিয়া মণিপুরী     ਪੰਜਾਬੀ     ગુજરાતી     ଓଡ଼ିଆ     தமிழ்     తెలుగు     ಕನ್ನಡ     ತುಳು     മലയാളം     සිංහල     བོད་ཡིག     ᱥᱟᱱᱛᱟᱲᱤ     ไทย     ລາວ     မြန်မာဘာသာ     ၽႃႇသႃႇတႆး     ភាសាខ្មែរ     ᨅᨔ ᨕᨘᨁᨗ Океания     Acèh     Basa Jawa     Bislama     Chamoru     Dorerin Naoero     English     Español     Gagana Samoa     Hawaiʻi     Māori     Norfuk / Pitkern     Português     Reo tahiti     Tetun     Tok Pisin}</math>


https://wikimedia.org/api/rest_v1/media/math/render/svg/4111dd7f4b95b67ee27fe61a6e3e9a0c8589cf94

<math>\begin{align} \text{ AaȦȧÄäÁáÀàĀāÂâǍǎĂăÃãÅåẠạ } & \text{ ÆæǼǽ BbḂḃḄḅḆḇ CcĊċĆćĈĉČč Çç DdḊḋĎďḎḏḌḍ Ḑḑ } \\ \text{ EeĖėËëÉéÈèĒēÊêĚěĔĕẼẽẸẹ Ȩȩ } & \text{ FfḞḟ GgĠġḠḡĜĝǦǧĞğ HhḢḣḦḧĤĥȞȟḤḥẖḪḫ Ḩḩ } \\ \text{ IıİiÏïÍíÌìĪīÎîǏǐĬĭĨĩỊị } & \text{ JjĴĵ KkḰḱǨǩḲḳḴḵ Ķķ LlĹ弾ḶḷḺḻ ĻļŁł } \\ & \text{ MmṀṁḾḿṂṃ NnṄṅŃńŇňÑñṆṇṈṉ Ņņ} \\ \text{ OoȮȯÖöÓóÒòŌōÔôǑǒŎŏÕõỌọ } & \text{ ØøǾǿ Œœ PpṖṗṔṕ Qq RrṘṙŔŕŘřṚṛṞṟ Ŗŗ } \\ & \text{ SsṠṡŚśŜŝŠšṢṣ Şş ß TtṪṫẗŤťṬṭṮṯȚț Ţţ } \\ \text{ UuÜüÚúŰűÙùŪūÛûǓǔŬŭŨũŮůỤụ } & \text{ VvṼṽṾṿ WwẆẇẄẅẂẃẀẁŴŵẈẉẘ XxẊẋẌẍ } \\ \text{ YyẎẏŸÿÝýỲỳȲȳŶŷỸỹẙỴỵ } & \text{ ZzŻżŹźẐẑŽžẒẓẔẕ ·×÷ } \\ \end{align}</math>


https://wikimedia.org/api/rest_v1/media/math/render/svg/bc91cbe64da402ce02572272e4067fae394c87e1


As can be seen from the svg, the part in the path tag and part as text tag

  1. why server can't draw everything in path and give everyone the same picture
  2. text tag with font-family="monospace" so characters are displayed depending on browser and os. Firefox on win 10 gives Courier New for monospace when latin letters are drawn by path and serif. These two fonts look very different. Mobile opera mini for the Cyrillic shows tofu symbols, although it shows the Cyrillic text itself; and Latin characters in the path are of course visible
  3. why \text{} shown partially by text and partially by tag. It gives a mixture of monospace and serif inside one word and differences in the height of the letters <math>\text{Žemaitėška}</math>
  4. also an option add css class for text in the svg so that wikipedians can locally configure the class via css

Event Timeline

Math tags shows Cyrillic text and other characters in thin, angular font. At the same time, many Latin characters, and even Chinese and Arabic, appear in a thick, smooth, pretty font.
<math>\alpha=\text{АБабвгдрзЗABabcdgG电}</math>

I do not consider that thin (Firefox 64 on Linux):

Screenshot from 2019-01-02 01-02-41.png (87×854 px, 20 KB)

In Wikipedia with Cyrillic, we use a lot of text in formulas and formulas are shown from two different fonts, not as pretty as in other languages.
<math>V_\text{смеси}=V_\text{mixture}</math>

I do not consider that less 'pretty':

Screenshot from 2019-01-02 01-02-40.png (80×426 px, 10 KB)

As "pretty" is subjective, do you have specific fonts in mind which support cyrillic and look more similar to the non-cyrillic ones?

Снимок020119.JPG (43×377 px, 10 KB)

For Cyrillic letters in svg

font-family="monospace"

and depends on the browser and os.
Latin letters are drawn by path (and serif).
Bold and smooth vs thin and agular and second font - in firefox (default for cyrilic Courier New) win 10 the difference in many formulas is big and striking.

As "pretty" is subjective, do you have specific fonts in mind which support cyrillic and look more similar to the non-cyrillic ones?

Something similar to the font of Latin letters and plus they could have been drawn together in path. Or a set of fonts which is used in Wikipedia for articles text.

depends on the browser and os.

If this is known to you then please include such crucial information in the initial task description. Thanks!

  1. why server can't draw everything in path and give everyone the same picture

This is a general problem that relates to several other issues (cf. T50032) and comes down to font limitations.

The underlying problem is that MathJax (used by Mathoid / the Math Extension) is configured to use a font (derived from Computer Modern) which has fairly limited Unicode support. Switching to another supported font with wider Unicode support (e.g. STIX) is technically easy but will lead to visual changes (and won't cover e.g. Chinese characters either).

In the long run, MathJax might add support for a font like NOTO to provide very wide coverage but that's a way off.

  1. text tag with font-family="monospace" so characters are displayed depending on browser and os. Firefox on win 10 gives Courier New for monospace when latin letters are drawn by path and serif. These two fonts look very different.

That's MathJax fallback behavior when a codepoint is not covered by the font. Since e.g. Wikipedia does not set any font for the body text (just serif), it's not possible to choose a matching font.

As noted in other issues the quality would probably improve if SVGs were not loaded via img tags but inlined in the HTML.

Mobile opera mini for the Cyrillic shows tofu symbols, although it shows the Cyrillic text itself; and Latin characters in the path are of course visible

That sounds like a browser bug. Not sure that's in scope.

  1. why \text{} shown partially by text and partially by tag. It gives a mixture of monospace and serif inside one word and differences in the height of the letters <math>\text{Žemaitėška}</math>

That's because those characters covered by the font will be converted to SVG paths, those that need fallbacks will use SVG text elements.

  1. also an option add css class for text in the svg so that wikipedians can locally configure the class via css

That would be possible (in fact it's already simple to write a selector) but it has no effect since SVGs are loaded via img tags and CSS won't reach them (unless you add it to the SVG file which is not possible either and opens a whole different set of problems).

@Sunpriat May I ask you what exact OS you're on? In the Wikimedia Design team we've been working on finding better proposals for operating system/language font solutions that might enable better readability than the generic sans-serif, serif and monospace font family choices, see “Operating system default sans-serif font”.

what exact OS you're on?

win 10 1803 17134.472 (ru), Firefox 64.0 (ru)
For a math tag, there probably is an opportunity to add all unicode text drawing with this "better readability" font directly to the svg-path (OS-independently, before sending picture to the reader).