Displaying coloured OTF fonts

[richmond62]

I downloaded a free coloured OTF font onto my MacOS 15 machine and could NOT get it to display anywhere properly . . .

https://www.fontspace.com/peeka-boo-font-f89950

In ancient Ethiopic manuscripts (among many other places) obviously bored scribes started getting funky and doing stuff like this:
-

SShot 2024-10-15 at 15.17.00.png (12.2 KiB) Viewed 1946 times

-
Sorry: not easy to see: but, basically this is a punctuation mark that is coloured:
-

SShot 2024-10-15 at 15.25.09.png (12.97 KiB) Viewed 1944 times

-
Here's my impression of the same sort of thing.

It would be quite possible to make a coloured OTF font with these coloured glyphs, but as far as I can see if one is used inside a field it does NOT show up.

"OpenType SVG is supported in some recent apps, including Adobe Photoshop 2017, Illustrator 2017, Mozilla Firefox"

https://gitlab.gnome.org/GNOME/gimp/-/issues/10937

[OpenXTalkPaul]

Here's my impression of the same sort of thing.

It would be quite possible to make a coloured OTF font with these coloured glyphs, but as far as I can see if one is used inside a field it does NOT show up.

"OpenType SVG is supported in some recent apps, including Adobe Photoshop 2017, Illustrator 2017, Mozilla Firefox"

https://gitlab.gnome.org/GNOME/gimp/-/issues/10937

It should be possible. What OS/OXT version are you running it on?

OTF Color fonts didn't become standardized until 2016. There wound up being different color file formats that had been develop in the meantime, so there's apparently scattered support for vaious different color font formats. Personally, I doubt there will ever even be wide adoption of color fonts, beyond emojis, but I could be wrong, it has only been standardized under 10 years.

https://www.colorfonts.wtf

Colored OTF fonts, such as Apple's Emoji font and Ubuntu's Color Emoji Fonts, can actually be made of bitmapped pixel images for the glyphs (up to 256px maximum size), those work in a text field just fine for me on macOS, in fact you can even have them as your stack file name as I have one called " .stack". Bitmapped OTF Color SVG Fonts can work (SVG supports having images embedded in them) should work.

Here's some commercial pixel based color OTF font examples:
https://handmadefont.com/shop/color-explode-font/
https://creativemarket.com/mr.ramon/634 ... font-Fargo

There's also colored SVG Fonts that are actually vector based. I don't think I've ever tried one of those in the IDE.

The engine uses Freetype and Pango libraries to do font stuff.
https://gitlab.gnome.org/GNOME/pango/-/issues/435

Just found this tid-bit:
"FreeType 2.10 supports Segoe UI Emoji and similar fonts (that use CPAL format), v2.9.1 does not.
Not sure which version v9.6.3 engines were compiled with.

[tperry2x]

If I was doing it, I'd probably fake the appearance of it - with a multicoloured PNG.
I'd set the character of it to the imagesource, like I do in the about stack (gearwheel icon) in the engine number field:

Code: Select all

set the imagesource of char 1 of line 1 of field "enginefield" to 205303

[richmond62]

That would not allow one to export HTML, RTF, or PDF documents properly.

[tperry2x]

That would not allow one to export HTML, RTF, or PDF documents properly.

Don't know about HTML or RTF, but certainly PDF seems to work well using that method

[richmond62]

Ah, Yes, PDF export will work as it can embed pictorial elements.

Ideally . . . OXT should handle Coloured OTF fonts in juts the same way as it deals with TTF and black-and-white OTF fonts, and export them as such so that they show up in the same way in HTML and RTF documents as long as the fonts are either on a user's machine or set up as WOFF web-fonts for a browser.

[OpenXTalkPaul]

Gotta run but did a quick test of color font in a text fld, using this freeware font:
https://www.fontspace.com/multicolore-pro-font-f49758

Screen Shot 2024-10-16 at 2.08.54 PM.png (138.48 KiB) Viewed 1739 times

Could you guys test with that font on other platforms?

I opened that font in the FontForge version I have installed, it opens, but it displays the glyphs as black-only filled character shapes.

[richmond62]

I opened that font in the FontForge version I have installed

Fontforge cannot cope with coloured fonts.

The commercial Fontlab 7 can . . . (your morality may vary).

[richmond62]

Screenshot 2024-10-16 at 21.24.25.jpg (225.66 KiB) Viewed 1737 times

-
Yes, this font works here:

OXT Lite 1.08

MacOS 12.7

[OpenXTalkPaul]

OK so that confirms at least that particular format of OTF SVG Color Fonts (of the vector-glyph kind) seem to work OK on macOS (at least on 10.14+, earlier versions not tested).

I'll have to check PDF output that uses that font to see if it stays as a Font specification, rather than rasterizing it to an embedded image. When you use an image reference for 'imageSource' of a character the PDF includes the image to-size and the rest of the text stays as text, for which you need the correct font embedded into the PDF or installed on the system. It also keeps button labels as text.

I have some PDF pro-editing tools available to me so I can see exactly how the output PDF is constructed:

Screenshot 2024-10-16 at 3.15.48 PM.png (652.76 KiB) Viewed 1713 times

Images get resampled in PDF output, in my experience images are usually in the PDF output at either 72 (which is the case with the imageSource here),144dpi, or 288dpi (Apple 'Retina' displays). 288dpi is 4x 72dpi traditional monitor resolution and just under 300dpi which has long been used as the gold-standard for high-resolution color images in commercial printing, so that would be my preferred resolution in output.

Screenshot 2024-10-16 at 4.55.27 PM.png (222.53 KiB) Viewed 1697 times

By the way, I'm on a machine running the latest macOS 15.0.1 (can't test OXT here though), I just noticed there's system-wide 'auto-complete' that's a kind of great feature to have!

[OpenXTalkPaul]

I opened that font in the FontForge version I have installed

Fontforge cannot cope with coloured fonts.

The commercial Fontlab 7 can . . . (your morality may vary).

Hmm, I have found mention of some work done on certain Type 3 varieties of layered-filled vector editing support for Fontforge,, but obviously that's not ready for prime-time, though you can't beat the price. It does appear that most of the software that supports creating Color SVG OTF Fonts are of the commercial variety.

'Birdfont' might be an option:
https://birdfont.org/download.php
Scratch that, it looks like the free version doesn't support Color Fonts.

[OpenXTalkPaul]

Just to test things out a bit further, I did '"Print Card" on that color font test stack, then opened it in vector art editor.
Strange but good result, it created a 288dpi image of the colored text in the feild, HOWEVER there was ALSO a copy of the art behind that image (inside the same a mask rect path) that retained the color vector paths of the color font.

The vector version is resolution independent, not to mention completely editable (and easily 'trap'able if you're into that prepress kind of thing) so it would be far better if the 288dpi pxel image version of the colored text was not there, or at least not on a layer above the vector art completely obstructing it. But either version should be fine for most people's uses, and at least we know the vector path of glyphs are retained if we want to edit them later.

Screen Shot 2024-10-16 at 11.50.43 PM.png (102.2 KiB) Viewed 1594 times

Screen Shot 2024-10-16 at 11.51.00 PM.png (58.75 KiB) Viewed 1594 times

[richmond62]

This is probably going to leave me with yellow legs: but as my legs are already almost dark green, what the hell?

http://web.archive.org/web/201412232244 ... lor-emoji/

A tool called emoji_builder.py, to embed a set of PNG images into an existing fonts

-

Slobber.jpg (126.84 KiB) Viewed 1535 times

-
"Hot Damn!" 'tis the wayback machine, and there ain't no way . . .

I wonder if anyone happens to have any sort of link to this?

Umm: possssssibly:

https://github.com/joypixels/emojione/issues/477
-

SShot 2024-10-17 at 13.15.18.png (36.45 KiB) Viewed 1531 times

-

SShot 2024-10-17 at 13.22.16.png (70.21 KiB) Viewed 1530 times

-
https://youtu.be/jQvUBf5l7Vw

[OpenXTalkPaul]

A tool called emoji_builder.py, to embed a set of PNG images into an existing fonts

I wonder if anyone happens to have any sort of link to this?

https://github.com/behdad/color-emoji/b ... builder.py

If you're OK with a GUI-less tools then there's a few out there from various sources that can do different things with OTF Fonts.

Like the one linked from that page, you linked too.
https://github.com/MitchTalmadge/Emoji- ... s/tag/1.91
Or this one:
https://github.com/behdad/color-emoji
Which has a rather informative page here:
https://rawgit.com/behdad/color-emoji/m ... on/v1.html

For a nice vector font editor with color SVG / Image glyph support, all I'd been finding were commercial offerings.

I'm somewhat surprised that FontForge doesn't support that already.
This seems to indicate FontForge does support some color fills in 'multi-layer' glyphs:
https://fontforge.org/docs/ui/dialogs/m ... nfo-dialog.

Here's a dev tool with a GUI from MicroSoft:
https://apps.microsoft.com/detail/9nj7k ... n-gb&gl=gb

[OpenXTalkPaul]

Here's an awesome JS library that can extract the vectors from glyphs of font:
https://opentype.js.org
https://github.com/opentypejs/opentype.js
It's written in Javascript, but we can use it when xTalk scripting on the web or with some other JS engine, like the one accessible with the Browser widget. Opentype.js supports color fonts too.

Adobe's Font Dev Kit (Apache 2.0 License) thing looks like it has some useful command-line tools as well:
https://adobe-type-tools.github.io/afdk ... rview.html
https://github.com/adobe-type-tools/afdko

[richmond62]

Supposedly:

https://birdfont.org/

Birdfont is a free font editor which lets you create vector graphics and export TTF, OTF and SVG fonts. The editor has good support for both monochrome and color font formats.

BUT, when you go and look you find that support for coloured fonts is only available in a commercial version.

Deceptive advertising!

[OpenXTalkPaul]

Supposedly:

https://birdfont.org/

Birdfont is a free font editor which lets you create vector graphics and export TTF, OTF and SVG fonts. The editor has good support for both monochrome and color font formats.

BUT, when you go and look you find that support for coloured fonts is only available in a commercial version.

Deceptive advertising!

Yeah I thought so too, that's why I didn't mention that one.

[richmond62]

I am not sure quite what this means:

FontForge can already make multilayered/multicolored fonts; Type3 and SVG fonts

https://github.com/fontforge/fontforge/issues/677

[OpenXTalkPaul]

I am not sure quite what this means:

FontForge can already make multilayered/multicolored fonts; Type3 and SVG fonts

https://github.com/fontforge/fontforge/issues/677

I think 'Type 3 ' OTF fonts can have color, gradient or pattern fills assigned to glyphs.
From what I've gathered from reading up on this whole Color Fonts thing is that even though a standard was settled on in 2016 support for various color font formats is still spotty, with some color Fonts that only work in color for certain apps (like Adobe apps), while others work fine in all apps (at least they work on newer OSes).