Page MenuHomePhabricator

Conversion of fullwidth alphabets to halfwidth in CSS breaks some font family names
Open, Needs TriagePublic

Description

If style attributes of span or div tags contains fullwidth alphabets, these alphabets are converted into halfwidth alphabets.
If we use Japanese font families (which include fullwidth alphabets in the names) in 'font-family' specification in style tag, the names of font families are converted to halfwidth and web browsers do not recognize the font family.

Steps to Reproduce

Output following wiki text to HTML (https://test2.wikipedia.org/wiki/Special:ExpandTemplates Special:ExpandTemplates is easy to test raw HTML output):

<div style='font-size:50pt'>
# <span style="font-family: 'MS P明朝';">理</span>
# <font face="MS P明朝">理</font>
</div>
  • Note: The div tag outside is just a magnification to make it easy to check the font style.
  • Note: The font tag is just for comparison and is deprecated tag in HTML5

Actual Results

  1. We get following HTML output
<div class="mw-parser-output"><div style="font-size:50pt">
<ol><li> <span style="font-family: &#39;MS P明朝&#39;;">理</span></li>
<li> <font face="MS P明朝">理</font></li></ol>
</div>
</div>
  • Note: The first 'MS P明朝' (fullwidth alphabets) in span tag is converted into 'MS P明朝' (halfwidth alphabets)
  • Note: The second 'MS P明朝' (fullwidth alphabets) in font tag is not converted
  1. We can see in web browsers(IE11, Firefox, Chrome)
    • The first '理' in span tag IS NOT in font family 'MS P明朝'
    • The second '理' in font tag IS in font family 'MS P明朝'

Expected Results

  1. Ideal HTML output
<div class="mw-parser-output"><div style="font-size:50pt">
<ol><li> <span style="font-family: &#39;MS P明朝&#39;;">理</span></li>
<li> <font face="MS P明朝">理</font></li></ol>
</div>
</div>
  1. In web browsers, we can see both '理' is in font family 'MS P明朝'

Related resource

Additional infomation of Japanese font family name

There are several Japanese font families which include fullwidth alphabets in the names.
A font family named 'MS 明朝' (MS Mincho) is a good example which is commonly used.
Most web browsers do not recognize 'MS 明朝' (in halfwidth) as 'MS 明朝' (in fullwidth).
Font families with fullwidth alphabets are used in existing templates in Japanese Wikipedia:
e.g. https://ja.wikipedia.org/wiki/Template:JIS90%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88

Event Timeline

MawaruNeko renamed this task from Conversion of fullwidth alphabets to halfwidth in CSS breaks some font family names to [Bug report]Conversion of fullwidth alphabets to halfwidth in CSS breaks some font family names.Nov 7 2017, 4:36 PM
Pppery renamed this task from [Bug report]Conversion of fullwidth alphabets to halfwidth in CSS breaks some font family names to Conversion of fullwidth alphabets to halfwidth in CSS breaks some font family names.Mar 28 2024, 12:32 AM