Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hebrew diacritical marks offset in Safari and Edge #966

Closed
MikeTschudi opened this issue Jul 31, 2018 · 11 comments
Closed

Hebrew diacritical marks offset in Safari and Edge #966

MikeTschudi opened this issue Jul 31, 2018 · 11 comments
Assignees
@paulcpederson
Labels
in development
Projects
v1.0.3

Comments

@MikeTschudi
Copy link
Member

MikeTschudi commented Jul 31, 2018 •
edited
Loading

Started with the Quickstart, changed the html tag to <html lang="he" dir="rtl">, and added the text "לְדַפדֵף הפתרונות שלי עֶזרָה הֲגָנָה" to the page content. In Safari & Edge, the diacritical marks are offset to the left:
image
Safari 11.1.2 on top; Chrome 68 on bottom; Edge offset like Safari; FF 61 & IE 11 OK. Sample website: http://localgovtemplates2.esri.com/support/fonts/he.html

Thanks to @akudinova477, who discovered this.
@paulcpederson
Copy link
Member

@MikeTschudi this is either a problem with the safari rendering engine, or how we're declaring the unicode range for the hebrew font. I'll look into it and see if I can figure out where this is breaking down.

@paulcpederson paulcpederson self-assigned this Jul 31, 2018
@paulcpederson paulcpederson added this to To do in v1.0.3 Jul 31, 2018
@MikeTschudi
Copy link
Member Author

@paulcpederson, if I use the debugger to remove "Avenir Next <W01,W00,>", the next font family is Avenir, and it displays correctly in both browsers.

@paulcpederson
Copy link
Member

@MikeTschudi are you using this on a page with the JSAPI?

@paulcpederson
Copy link
Member

paulcpederson commented Jul 31, 2018 •
edited
Loading

Are you on a Mac/do you have Avenir installed on your system? Most likely when you remove the fonts from the font stack it's just falling back to a copy of Avenir which you have on your system. Users that don't have that font (windows users, android, linux, etc) won't see the correct font at all in that scenario. I am trying a couple things locally and hopefully I'll figure out the issue.

@MikeTschudi
Copy link
Member Author

Oops.

Safari test is on a Mac; Edge test is on Windows 10.

@MikeTschudi
Copy link
Member Author

@paulcpederson --no JSAPI for test page (copied below); JSAPI 4.8 + calcite-web + globalNav for webapp where it's also visible.

<!doctype html>
<html lang="he" dir="rtl">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Your Title</title>
    <link rel="shortcut icon" href="/img/favicon.ico">
    <!-- get calcite-web css from the cdn (use latest version) -->
    <link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.0.1/css/calcite-web.min.css">
    <!--[if lt IE 9]>
      <script src="/assets/javascripts/libs/selectivizr.js"></script>
      <script src="/assets/javascripts/libs/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrapper">
      <!-- header -->
      ArcGIS תעשייה ספציפית מפות ויישומיםדף הבית לְדַפדֵף הפתרונות שלי עֶזרָה הֲגָנָה
    </div>
    <div class="footer" role="contentinfo">
      <!-- content of footer -->
    </div>

    <!-- get calcite-web js from the cdn (use latest version) -->
    <script src="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.0.1/js/calcite-web.min.js"></script>

    <!-- interactive patterns need to be initialized -->
    <script>
       calcite.init()
    </script>
  </body>
</html>

@paulcpederson
Copy link
Member

thanks @MikeTschudi , that is very helpful

@MikeTschudi
Copy link
Member Author

@paulcpederson The test program is hosted at http://localgovtemplates2.esri.com/support/fonts/he.html

@paulcpederson
Copy link
Member

@MikeTschudi I figured this out: when exporting from monotype, OpenType features must be enabled so that these work as expected. Not totally sure why this only affected Safari, I guess chrome's rendering engine is slightly more capable of figuring it out even when the OpenType stuff isn't there.

I've exported the hebrew font files out again, and will let you know once they make their way to the CDN.

@paulcpederson paulcpederson moved this from To do to In progress in v1.0.3 Aug 1, 2018
@MikeTschudi
Copy link
Member Author

@paulcpederson , thanks for the update. Note that Edge was affected, too.

paulcpederson added a commit to paulcpederson/calcite-web that referenced this issue Aug 4, 2018
@paulcpederson
Esri#966 - fix diacritics in hebrew
332a425
macandcheese pushed a commit that referenced this issue Aug 6, 2018
@paulcpederson @macandcheese
📦 v1.0.3 (#971)
299448a 
* #966 - fix diacritics in hebrew

* #960 - allow override of vw-ratio variable

* #969 - increase contrast of green labels

* #953 - fix modal toggles when toggle has child element

* 📦 v1.0.3

* fix formatting of links in CHANGELOG
@paulcpederson
Copy link
Member

new release v1.0.3 that fixes this issue in Edge + Safari

@paulcpederson paulcpederson moved this from In progress to Done in v1.0.3 Aug 6, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@paulcpederson paulcpederson

Labels
in development
Projects
No open projects
v1.0.3
  
Done
Milestone
No milestone
Development

No branches or pull requests
2 participants
@paulcpederson @MikeTschudi