<html>
    <head>
      <base href="https://bugs.webkit.org/">
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - Slanted text in variable fonts is not rendered correctly if font-style descriptor defines an upper angle that is less than 20deg"
   href="https://bugs.webkit.org/show_bug.cgi?id=200369">200369</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>Slanted text in variable fonts is not rendered correctly if font-style descriptor defines an upper angle that is less than 20deg
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari Technology Preview
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>CSS
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned@lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>sime.vidas@gmail.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Steps to reproduce:

1. Open <a href="https://jsbin.com/dabetaq/edit?css,output">https://jsbin.com/dabetaq/edit?css,output</a>

Expected results:

All three boxes should have the same, correct text slant.

Actual results:

In Safari, the slant is incorrect for the second and third box.

Explanation:

It appears that font-style: oblique only renders the correct slant if the upper angle in the font-style descriptor is at least 20deg in Safari. But the variable font has a 'slnt' axis range of 0 to 10*, which translates to the CSS range 0dge 10deg.

*You can check the font file’s 'slnt' range on wakamaifondue.com.

If you change this range to 0deg 20deg, Safari renders the slant correctly. Safari should let authors specify the variable font’s actual slant range. Currently, authors have to use 20deg as some sort of magic number to get correct rendering in Safari.

Note: I’m not an expert on variable fonts, but the range 0deg 10deg works in Chrome and Safari, so this seems to be a bug in Safari.</pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>