Pyanepsion Posted July 22, 2023 Share Posted July 22, 2023 Hello, everybody, I noticed a problem in Affinity Designer related to the spacing of the first line of SVG files when the font and colour are changed. Here are the steps to reproduce the problem: Create Arial text in a given colour. Select certain letters and change them to Times News Roman in a different colour. Then export as an SVG and view the file on an online platform. When viewed on a Windows screen, the SVG file looks fine. However, on Android devices, an extra space appears before the modified letter on the first line. The AFDESIGN file used to observe this problem is attached to help resolve this anomaly. svg-unexpected-space.afdesign Quote 6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity Publisher, Affinity Designer, Affinity Photo). ███ Mais je vous le demande, peut-on imaginer une police sans sérifs ? Link to comment Share on other sites More sharing options...
walt.farrell Posted July 22, 2023 Share Posted July 22, 2023 13 minutes ago, Pyanepsion said: Select certain letters and change them to Times News Roman in a different colour. I'm curious whether it happens if you don't change the color. And whether it happens if you use a more usual character, rather than U+FFFC? Also, what application(s) did you test with for viewing on Android? Quote -- Walt Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases PC: Desktop: Windows 11 Pro 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 Laptop: Windows 11 Pro 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU. Laptop 2: Windows 11 Pro 24H2, 16GB memory, Snapdragon(R) X Elite - X1E80100 - Qualcomm(R) Oryon(TM) 12 Core CPU 4.01 GHz, Qualcomm(R) Adreno(TM) X1-85 GPU iPad: iPad Pro M1, 12.9": iPadOS 18.1.1, Apple Pencil 2, Magic Keyboard Mac: 2023 M2 MacBook Air 15", 16GB memory, macOS Sequoia 15.0.1 Link to comment Share on other sites More sharing options...
MikeTO Posted July 22, 2023 Share Posted July 22, 2023 The issue is that you've chosen two fonts with very different sizes. I didn't check but I assume their em sizes are different, you can see this with the x-height of é compared to e but an uppercase M would show it better. When there's a formatting change, Publisher has to start a new text tag. I created my own test file since the one you uploaded didn't have the accented characters (they were replaced by U+FFFC, the [obj] symbol). Here's what I get for the first few words up to appelées: <text x="14px" y="57.223px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:75px;fill:rgb(16,24,32);">La femme, une de celles appel</text> <text x="1035.47px" y="57.223px" style="font-family:'TimesNewRomanPSMT', 'Times New Roman', serif;font-size:75px;fill:rgb(234,0,0);">é</text> <text x="1068.76px" y="57.223px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:75px;fill:rgb(16,24,32);">es</text> The é is in its own tag as it should be. Affinity has to specify a starting x/y coordinate for that block of text and due to the size difference between Times and Arial, Android must be thinking that there's a space there. You'd likely get different results with tighter tracking or kerning and with fonts that have more similar em sizes. I could be wrong but I don't think this is a bug in Affinity. Quote Download a free PDF manual for Affinity Publisher 2.5 Download a quick reference chart for Affinity's Special Characters Affinity 2.5 for macOS Sequoia 15.2, MacBook Pro 14" (M4 Pro) Link to comment Share on other sites More sharing options...
Pyanepsion Posted July 22, 2023 Author Share Posted July 22, 2023 Here is a HTML source for displaying the SVG image on a web page: <!DOCTYPE html> <html> <body> <img src="svg-unexpected-space-green.svg" alt="SVG File"> </body> </html> This new file produces the same malfunction on an Android phone (Google Chrome or similar), but not on a PC screen. This time I've only changed the colour. The test text of SVG file is: Quote La femme, une de celles appelées galantes, était célèbre par son embonpoint précoce qui lui avait valu le surnom de Boule de Suif. Petite, ronde de partout, svg-unexpected-space-green.afdesign Quote 6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity Publisher, Affinity Designer, Affinity Photo). ███ Mais je vous le demande, peut-on imaginer une police sans sérifs ? Link to comment Share on other sites More sharing options...
Return Posted July 22, 2023 Share Posted July 22, 2023 I exported the svg and opened it in a browser on my android phone and am seeing the same spacing. Pyanepsion 1 Quote Link to comment Share on other sites More sharing options...
MikeTO Posted July 22, 2023 Share Posted July 22, 2023 6 minutes ago, Pyanepsion said: This new file produces the same malfunction on an Android phone (Google Chrome or similar), but not on a PC screen. This time I've only changed the colour. I don't see anything wrong with the SVG code. Affinity creates a new <text> tag whenever the formatting changes, whether that's the colour or the font. So the word appelées with one character in green requires 3 lines of code: <text x="14px" y="14.961px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:16px;fill:rgb(16,24,32);">La femme, une de celles appel</text> <text x="231.914px" y="14.961px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:16px;fill:rgb(79,160,69);">é</text> <text x="240.813px" y="14.961px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:16px;fill:rgb(16,24,32);">es</text> Affinity could have generated it like this: <text x="14px" y="14.961px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:16px;fill:rgb(16,24,32);">La femme, une de celles appel<tspan fill="rgb(79,160,69)">é</tspan>es</text> with a single <text> tag and with <tspan> tags around the é to change its colour. That likely would have worked fine in Chrome for Android because then appelées would have been a single word and it couldn't be mistaken for multiple words. However, Affinity's SVG code is perfectly valid, you can put every character in a separate <text> tag if you wanted to, but it does increase the chance that something like this will happen. I find it odd though that Chrome for Android has this issue but not Chrome for Mac or Windows, they're both running the same Chromium engine. Chrome for iOS runs webkit so that's not comparable. Maybe one version of Chrome is newer than the other. Dan C and Pyanepsion 1 1 Quote Download a free PDF manual for Affinity Publisher 2.5 Download a quick reference chart for Affinity's Special Characters Affinity 2.5 for macOS Sequoia 15.2, MacBook Pro 14" (M4 Pro) Link to comment Share on other sites More sharing options...
Pyanepsion Posted July 24, 2023 Author Share Posted July 24, 2023 Hello, @MikeTO, your replacement code is shorter and displays the image correctly on Android. Thank. However, I don't understand why the SVG in my AFDESIGN file produced the fill code #509E2F and yours a code rgb(79,160,69), and moreover why the components are not rgb(80,158,47)? Quote 6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity Publisher, Affinity Designer, Affinity Photo). ███ Mais je vous le demande, peut-on imaginer une police sans sérifs ? Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.