Icons are oversized in Windows 10 14393/Edge #50
Comments
The one provided here is sized correctly. Perhaps related to the lack support of view box in SVG. |
Hmm.... Interesting. Awesome seeing SVGinOT working in Edge! This isn't a bug in this font, per se, since I am using the SVGs as-is from the EmojiOne project. Could this count as a bug in Edge or in EmojiOne? A workaround could be implemented in SCFBuild (the font build system used to create this font). Is there any difference with Twitter Color Emoji? The SVGs in it are built differently. |
@RoelN are you aware of this? Relevant to add to LapisLegit? |
@eosrei Spec of SVG in OT (link):
|
Yes, I've read the spec many times. A copy/paste of multiple paragraphs isn't helpful to get your point across. Do you want me to transform all of the source material? Edit: A transform is already applied to fix the alignment. The screenshots show that working correctly. |
@eosrei The spec speicifes that:
So... yes, you need to transform the SVG either, to make the SVG outline fits the |
Will Edge support view boxes? AFAIK to fix this in the font I need to build full SVG parsing (reparsing?) into SCFBuild. Hmm... there is a 2.048x scaling on the source. SVGs always display too small without it in Firefox.
Already done. |
@eosrei I am not sure whether Windows (yes, it is a Windows D2D's built-in feature, so non-browsers can support it either) will support viewboxes in the far future, but in the incoming RS1, it won't. And perhaps Windows other engines (like freetype?) will never support viewboxes, considering it somehow conflicts with the Spec's requirements. |
How can I reproduce this for testing? Will it work (aka break) on the newest Win10 VMs from Microsoft? https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ I have an older WIn10 VM now, but could download a new one. FWIW and for my own future reference:
|
@eosrei You have to use the latest Windows 10 14393 build, install the font, and open a web page using your font with Edge. |
Awesome seeing SVGinOT work on Win10! I've confirmed this bug in Edge and Sticky Notes on Win10 Preview 14.14393. How unbelievably frustrating. Reinebow renders incorrectly, but completely differently than EmojiOne Color. EmojiOne Color is huge, but Reinebow is small?!?! https://xerographer.github.io/reinebow/ These two fonts shouldn't be this drastically different. I'll try some tests later this week, but I cannot spend lots of time debugging until there is confirmation this is how MS intends for it to render. I wish there were a publicly accessible issue queue on Microsoft projects so I could track the status/details. Edge cannot load the regular SVG files in the Github preview, so there is still work to do. Edge/Win10 vs FF/Ubuntu16.04: Additional note: I'm surprised they haven't fixed font hinting in Windows. The regular glyphs look terrible in Character Map. I may have to run |
ttfautohint is ok |
@eosrei I haven't looked into the calculations scfbuild does on the axis and scale, but I would dig in that area for the scaling bug. Maybe the I still have to download this VM. How does http://bixacolor.com/ or https://pixelambacht.nl/2014/compyx-a-multicolor-8bit-font/ fare in W10? Or indeed https://pixelambacht.nl/lapislegit/? |
@RoelN |
@be5invis Ah, thanks! Some things to note:
|
@RoelN FWIW I couldn't test any of your fonts last night (PST), your server wasn't responding. ¯_(ツ)_/¯
Doesn't surprise me. :-/ I'll look at applying the scaling transform to remove the viewbox and background. It's interesting how much of the SVG spec isn't implemented by Microsoft. No animations, no rotations. |
I've pulled a short example SVG from Bixa Color to compare. MSFT is using a strict interpretation of the <unitsPerEm value="1000"/> The less than symbol clearly is using numbers in the 0-1000 range:
SCFBuild is hard coded to use the now recommended value of 2048. The EmojiOne graphics are drawn with a
After:
I am going to rebuild v1.3 with this character changed and see if it renders correctly. |
Ah right, FontForge and Inkscape 0.91 cannot parse the output of
|
Currently trying to make
More to come... Just realized: Edge isn't wrapping the lines correctly. There's no horizontal scroll bar on the EmojiOne Color HTML demo page. @RoelN FWIW You can run @yincrash This issue may be of interest if you haven't seen it. |
|
Haha! I just checked the docs on indexToLocFormat. It cannot possibly be related. |
The upside-down may be caused by not flipping y coordinates. SVG uses a y-down coordinate system while TTF/CFF use y-up. |
Update: The sizing fix is due to the removal of the
Yeah. Chrome has major issues with line-wrapping ZJW in |
Ok, I see what to do to automate this nonsense. Original SVG copy/paste from Bixa:
With a coordinate system inversion Bixa Color SVGs are upside down, but not translated. That's why (1,-1) works for it, but not for me. Now I can do the same to Original upstream EmojiOne
Current EmojioneColor
New EmojiOneColor, pre
Thanks @be5invis and @RoelN ! I'll get this implemented in SCFBuild some time this week. |
@eosrei According to OT Spec, the “viewbox” is fixed by design, with the width identical to the value recorded in
|
I think that maybe Firefox is incorrectly handling view boxes: they scale view boxes to 1000_1000, instead of upm_upm. Therefore you have to manually introduce a 2.048x scale to make the size right, while Edge doesn't need that. |
The OT spec says that, but I've just proved it false in Edge and we already knew it false in Firefox ;) Either way, if I follow the spec, then it'll work in both. No problem! 🤼is displayed in the above Edge screen shot using:
Proof Edge handles the 64x64 viewBox attribute. Edit: At least as far as scaling. |
Yes. It works correctly, if I remove the viewBox attribute though. |
@eosrei : I have a speculation: Firefox cannot handle viewboxes correctly. They scale the glyphs’ outlines to 1000×1000, instead of upm×upm (the latter one is used by Edge). Removing the 2.048× scaling causes glyphs in FireFox undersized, and given that your font’s UnitsPerEm is 2048, I think that it is the real reason. |
Yes absolutely! The scaling to 1000x1000 was infuriating. I knew the existing solution was a workaround, but since there was no other implementation of the spec there was nothing else to test against. @RoelN 's fonts were different, but both worked in Firefox. So I didn't want to spend anymore time on it. I'm excited to update this and the other four fonts to work correctly in Edge. |
Nice work, thanks for the updates! Glad a solution has been found. |
Not sure how I missed the notification for this. It'd be really useful if implementations said what svg features they did and didn't implement. It's cool that there is more than one implementation now though! |
This thread talks about how Firefox indeed assumes 1000x1000 if you don't set the width/height yourself: https://lists.w3.org/Archives/Public/public-svgopentype/2016Aug/0000.html |
I know I know! It's out! I'll work on this at PyBay this weekend! Haha! |
Progress! I'm using Reinebow as my first test case since it is proportional, builds much faster, and works in-browser without an install. Full test with EmojiOne and TWEmoji tomorrow. Main problem was adjusting for font ascent/descent. Edit: Yes, I know |
Freizer(http://xerographer.github.io/freizer/) and Multicoloure(http://xerographer.github.io/multicoloure/) are now fixed with Edge. EmojiOne Color V1.4 is looking good too, except somehow word-wrap isn't working... 🤷 Not sure if this is an Edge, HTML, CSS, or font bug ATM. |
Strips viewBox, height and width during SVG import. Previous transform (translate and scale) calculation was designed for the Gecko renderer and didn't work in Microsoft Edge. This change makes the transform match the SVGinOT spec requirements for both renderers. Fixes #7 Details: * 13rac1/emojione-color-font#50 * RoelN/LapisLegit#19
Strips viewBox, height and width during SVG import. Previous transform (translate and scale) calculation was designed for the Gecko renderer and didn't work in Microsoft Edge. This change makes the transform match the SVGinOT spec requirements for both renderers. Fixes #7 Details: * 13rac1/emojione-color-font#50 * RoelN/LapisLegit#19
Fixed in SCFBuild. Will be in V1.4. Thanks for the help! |
Tested with 100% and 200% DPI.
The text was updated successfully, but these errors were encountered: