Mister Pixel Font

[Andree Vandestreek]

Ihave seen a very similar question in the past, I think it was unanswered. So I wonder if it is a Pango bug, or our wrong understanding of the API docs. Note that pango has ways to get bounding boxes for text, you may use that to adjust the size. For my current app, I do not care much about text size currently, but I may do later. (GitHub - StefanSalewski/SDT: A simple Nim GTK4 drawing and design tool)

From Pango.FontMetrics there is pango_font_metrics_get_ascent and pango_font_metrics_get_descent. So with some math we should be able to adjust our

pango_font_description_from_string() to get the desired size.

Pango is indeed not easy. Initially I had some trouble to get the PangoFontMetrics object at all, which is required for Pango.FontMetrics. Luckily your initial example shows us already how we can get it. My next problem is to exactly understand what you desire: From your initial post, you just desire that your returned height variable is exactly 144? Well it is easy to fix, in my code below the fix is

As I had some trouble to remember pango stuff, I started with A python example of how to create png images with text through pangocairo GitHub. That is my test1 proc in the code below. Then I created test2 proc, which used your initial code to create the PangoFontMetrics. With the fixed size, the second echo output prints exactly 144 as requested. But indeed all that is a bit difficult. I guess with Blend2d it will be not easy too, but at least Blend2d is still an active project, so maybe I should switch soon to Blend2D?

I think, for pixel based layout, we have to use PangoLayout (Pango.Layout) because Pango is mostly Point based (1 point is 1/72 inch). Mr Clasen told you already that for example pango_font_metrics_get_height() uses point, not pixel as unit. PangoLayout functions like Pango.Layout.get_pixel_extents gives us sizes in pixels, which we can use to position text. I think my own apps like -chess or do it that way, but I can not remember details.

I am working on a photo passepartout, with a picture in the middle and a logo with font underneath, in Affinity Photo. Somehow, no matter what I do, the font always appears pixelated in the document, and in the exported file, even when I convert it to curves. It is shown sharply in Affinity Designer, but if exported from there it's the same problem. I have to say I'm quite new to Affinity and this kind of work, so I don't really know what I'm doing and what could be wrong, but web searches haven't helped so far. I attached a few photos to illustrate the problem.

First, you need to be aware that Photo and Designer use different display technology. Photo is always using a pixel (raster) display format, whereas Designer uses a primarly vector display format (though it allows a pixel view; see View > View Mode).

Second, though, is the question of the export format you use, and once exported how much you zoom in. Some export formats (JPG, PNG, TIFF) are pixel (raster) formats, and some (PDF, SVG, EPS) are vector formats. If you export to a pixel format, and zoom in, you will see pixellation in text or images.

I'm planning to upload the pictures to Instagram and Facebook, so I exported in JPG. I exported in just the same size as the document is set in (see picture). I did have to zoom in quite a bit to see the pixellation, that is true, so it might just be the way it has to be.

If I open the same document in Designer, the font shows perfectly in vector view, but is also pixellated in pixel view, even if I redo the font in Designer. Is that correct? I thought a graphic text like that would also be vector-based.

Walt, I'm having same type issue, but it did make a difference in how it was viewable in a PDF and how it printed. 1.) Last year I was adding a logo that included both graphic and text to the back of a book I published, and it showed up pixelated on the edges in PDF and when printed. I used Affinity Photo. I then did something between copying over file from Designer to Photo, but I don't remember what, and it then had clean edges in the PDF file and then when printed on the cover of the book. When I went to reopen the file this week it showed it all blurred out and saying resource could not be found. I thought I did it embedded and not linked, so not sure why that's happening. Nevertheless, I can't reproduce it to work again, and I want my logo to be clean around the edges when printed, not pixelated. 2.) I do have an original EPS file of the graphic as well, but want to change it to white and do so by doing a color "overlay" on the layer. But when I export it as a PDF it puts the color back in.

For the pixelated edges in PDF, perhaps you applied some effect to the text that rasterized it. If we had the file, or a screenshot of the Layers panel and, for any layer with an "fx" marking, the effects panel, someone could probably tell you what caused it.

Ok! Looks like I figured out how to keep the white by changing the stroke color instead of using an "overlay." And looks like I figured out my main issue with how I was working things as well. Looks like I just need to change old habits. I always used Affinity Photo to make covers for books, but I noticed with my logo that it would not print out as clean as I wanted to. I just opened my Affinity Photo file in Affinity Design, added the logo, exported as a PDF and it's showing it very clean! I then tried using Affinity Publisher, added the logo, exported as PDF and its showing it really clean and not pixelated.

Should I always be using Affinity Publisher to do my covers now? I always used Affinity Photo as I was using that before Affinity Publisher came out. I then began using Affinity Publisher for the interior pages content, but didn't think of changing to that for the cover. But thinking about it now, Publisher would be a better choice to use for covers than Photo would be right?

As far as I know (which isn't too much without seeing your actual file) you should be able to do the same thing in Photo as you've worked out for Designer and Publisher, and get the same results. So I think it's completely up to you.

Thank you MKG for raising this issue and Walt for providing insight into the applications. I was having a similar issue when making a banner for my Etsy shop which was to be located in a PDF I was creating under Publisher. Thanks to the discussion I opened the banner in Publisher, rewrote the slogan in the same font and it was perfect. I then removed the previous pixel layer and saved as an SVG and reloaded into my PDF using the Image Place Tool and exported and it is perfect when opening in the PDF. ??

The original version included only the letters A to Z and the . and ! characters, but I just made an actual TTF version of the font (using an online tile-based font editor) that includes all printable ASCII characters. (No accented letters or fancy non-ASCII punctuation yet, though, and the lowercase letters are identical to the uppercase.)

Also, I've released these fonts into the public domain (via CC-Zero), so you can do whatever you want with them. In particular, if you don't like some of the design choices I made (like the slashed zero, or the serifless capital I) or just want to add more glyphs, you're free to clone the font and edit it yourself to suit your needs; the online editor is pretty easy to use.

Even at this size, some of the glyphs (especially the more complex punctuation symbols like &, @, # and *) suffer a bit, and some creative solutions (like the minuscule-style N) are necessary to keep all the shapes distinct. Still, it's more or less readable, even if some of the letters may be ambiguous if used on their own without context (such as the M, which could be mistaken for an N or an H).

3a8082e126