Skip to content
Snippets Groups Projects
This project is mirrored from https://github.com/metabase/metabase. Pull mirroring updated .
  1. Jul 02, 2024
  2. Jul 01, 2024
  3. Jun 28, 2024
    • adam-james's avatar
      Wrap non-latin characters in a span specifying working font (#44580) · 97575697
      adam-james authored
      * Wrap non-latin characters in a span specifying working font
      
      Fixes: #38753
      
      CSSBox seems to have a bug where font fallback doesn't work properly. This is noticeable when a font does not contain
      glyphs that are present in the string being rendered. For example, Lato does not have many international characters,
      so the rendered version of tables (that show up in Slack messages) will not render properly, making the card
      unreadable.
      
      Since this appears to be a downstream bug, I've opted to work around this limitation by wrapping any non-latin
      characters in a <span> that specifies the font family to be sans-serif, which should contain the glyphs to properly
      render.
      
      This leaves Lato in place for other characters.
      
      For now, I figured it's worth trying this solution over using Noto for 2 reasons:
      - we can keep Lato, which has been the decided font style for the app for some time (this keeps things consistent
      where possible)
      - the Noto font containing all glyphs is quite a large font (>20mb, I think) and it would be nice to avoid bundling
      that if we can.
      
      * stub installed fonts test
      
      * typo
      
      * Do wrapping, but now per-string, and in Clojure data not html string
      
      I've decided that a reasonable solution is to still wrap strings containing non-lato characters. But it's not done
      with str/replace to the html string but rather in a postwalk over the Hiccup data prior to rendering.
      
      Seems like a decent compromise of issues without patching CSSBox or fixing upstream (may be good to do, but will take
      longer to get a fix in).
      
      * add test checking that glyphs render correctly
      
      * Add a test that directly checks the wrapping fn
      
      * Change the string to keep the linter quiet
      
      * Change how we check if string can be rendered to faster method, new Lato Font
      
      With Sanya's help, the way I check if a given string is renderable with Lato is now faster.
      
      Also use the full Lato font, not just the 'latin' lato so we can cover more chars
      
      * change lato so that it loads the fn even in a fresh test run
      Unverified
      97575697
Loading