4 ms·

Sure, this question's probably pretty basic. Why draw it out with paths and all that instead of something like the following? Do SVG text elements not scale w

Sure, this question's probably pretty basic. Why draw it out with paths and all that instead of something like the following? Do SVG text elements not scale well? <svg> <text class="logo">Y</text> </svg> Or even just <span class="logo">Y</span> with the style providing color and border. And the arrows could be text too: 🞁 and 🞃. Just curious about why even make them images, given the note that "everything else is text, and scaled perfectly!"

clone1018 3y ago
Unsure why, but the arrow examples you have there show up as unicode code blocks for me in Firefox on a Mac. Probably one of the reasons not to use them like that!
- gibspaulding 3y ago
  They don't seem to work in Firefox on Linux either (Ubuntu 20.04), seem to be Windows only for whatever reason.
  - pwg 3y ago
    The two arrows work perfectly here with Slackware 15 and Firefox 102.9.0esr.
    - usr1106 3y ago
      They even work on the dinosaur age Firefox in Sailfish OS. I guess it's just whether the fonts used have the character or not, nothing to do with Firefox as such.
      - MayeulC 3y ago
        Probably, they don't show up on Firefox Android (Fennec on LineageOS 20)
        efreak 3y ago
        Might be an Android thing. They don't show up in materialistic either, a native HN client.
- chrismorgan 3y ago
  The more commonly-used characters are ▲ and ▼, BLACK {UP/DOWN}-POINTING TRIANGLE (U+25B2, U+25BC). Parent comment used much newer characters 🞁 and 🞃, BLACK {UP/DOWN}-POINTING ISOSCELES RIGHT TRIANGLE (U+1F781, U+1F783). These were added in Unicode 7, June 2014, where the others have been around for thirty years. I’m mildly surprised at lack of font support on macOS. For me they’re being rendered with Noto Sans Math, and completely wrong: they’re not being drawn as right-angled triangles at all (the angle is about 53° rather than 90°)! I’m guessing the commenter also had a bad font on them, because as a right angle it’d look all wrong for this purpose. (I’ve filed a bug report at https://github.com/notofonts/math/issues/47 https://github.com/notofonts/math/issues/47. Curiously, Noto Sans Symbols 2 also includes the character and gets its shape right, but Noto Sans Math is higher in the font fallback list (`fc-match sans-serif --all`: 881 lines, NotoSansMath-Regular.ttf is 52nd and NotoSansSymbols2-Regular.ttf is 89th.) There are also ⯅ and ⯆, BLACK {UP/DOWN}-POINTING TRIANGLE CENTRED (U+2BC5, U+2BC6). And more, but of roughly-these-sized ones, these are the ones. There are lots of triangles in Unicode.
  - Falkon1313 3y ago
    Ah, yes, those are the right ones! I was looking at the wrong code block. There are lots of triangles and also arrows, so commonness of font support would definitely be something to be careful of.
  - dingledork69 3y ago
    Mac doesn't support nearly 10 year old unicode standards?
  - SECProto 3y ago
    Interesting, only the old triangles work for me on Firefox (Android 12). They all show correctly on Firefox in Windows 10
hughw 3y ago
It's common to save the outline of text elements so that they don't have to ensure a certain font is present in the browser.
- jgalt212 3y ago
  Yes, that makes sense. But then you still have the same issue with the rest of the text on the site (and it's a text heavy site). It all appears to be Verdana, which has near 100% support across Windows and Mac. https://www.cssfontstack.com/Verdana https://www.cssfontstack.com/Verdana I think the parent's solution (given the simple nature of the logo), is the best way to go.

clone1018 3y ago

Unsure why, but the arrow examples you have there show up as unicode code blocks for me in Firefox on a Mac. Probably one of the reasons not to use them like that!

gibspaulding 3y ago
They don't seem to work in Firefox on Linux either (Ubuntu 20.04), seem to be Windows only for whatever reason.
- pwg 3y ago
  The two arrows work perfectly here with Slackware 15 and Firefox 102.9.0esr.
  - usr1106 3y ago
    They even work on the dinosaur age Firefox in Sailfish OS. I guess it's just whether the fonts used have the character or not, nothing to do with Firefox as such.
    - MayeulC 3y ago
      Probably, they don't show up on Firefox Android (Fennec on LineageOS 20)
      - efreak 3y ago
        Might be an Android thing. They don't show up in materialistic either, a native HN client.
chrismorgan 3y ago
The more commonly-used characters are ▲ and ▼, BLACK {UP/DOWN}-POINTING TRIANGLE (U+25B2, U+25BC). Parent comment used much newer characters 🞁 and 🞃, BLACK {UP/DOWN}-POINTING ISOSCELES RIGHT TRIANGLE (U+1F781, U+1F783). These were added in Unicode 7, June 2014, where the others have been around for thirty years. I’m mildly surprised at lack of font support on macOS. For me they’re being rendered with Noto Sans Math, and completely wrong: they’re not being drawn as right-angled triangles at all (the angle is about 53° rather than 90°)! I’m guessing the commenter also had a bad font on them, because as a right angle it’d look all wrong for this purpose. (I’ve filed a bug report at https://github.com/notofonts/math/issues/47 https://github.com/notofonts/math/issues/47. Curiously, Noto Sans Symbols 2 also includes the character and gets its shape right, but Noto Sans Math is higher in the font fallback list (`fc-match sans-serif --all`: 881 lines, NotoSansMath-Regular.ttf is 52nd and NotoSansSymbols2-Regular.ttf is 89th.) There are also ⯅ and ⯆, BLACK {UP/DOWN}-POINTING TRIANGLE CENTRED (U+2BC5, U+2BC6). And more, but of roughly-these-sized ones, these are the ones. There are lots of triangles in Unicode.
- Falkon1313 3y ago
  Ah, yes, those are the right ones! I was looking at the wrong code block. There are lots of triangles and also arrows, so commonness of font support would definitely be something to be careful of.
- dingledork69 3y ago
  Mac doesn't support nearly 10 year old unicode standards?
- SECProto 3y ago
  Interesting, only the old triangles work for me on Firefox (Android 12). They all show correctly on Firefox in Windows 10

hughw 3y ago

It's common to save the outline of text elements so that they don't have to ensure a certain font is present in the browser.

jgalt212 3y ago
Yes, that makes sense. But then you still have the same issue with the rest of the text on the site (and it's a text heavy site). It all appears to be Verdana, which has near 100% support across Windows and Mac. https://www.cssfontstack.com/Verdana https://www.cssfontstack.com/Verdana I think the parent's solution (given the simple nature of the logo), is the best way to go.