Noto Color Emoij is not rendered

[hajimehoshi]

Sorry if I missed, but is there API in typesetting to render color emojis? Apparently there is an API to get SVG data, but for example is there a way to get info for COLRv1? https://developer.chrome.com/blog/colrv1-fonts

[andydotxyz]

That's cool - I didn't know it was a thing. Looks like Safari doesn't support yet but I guess it takes time.
The render package has some code in it - but mostly just the SVG and PNG based emoji from a colour point of view.

[hajimehoshi]

Oh, there is already a rastarizer for SVGs, right? That's nice!

[andydotxyz]

We're using oksvg which can handle most things ok. It's not complete but gets most emoji fonts right.

[hajimehoshi]

Thanks. I'll try https://github.com/srwiley/rasterx first and then see what's going on. COLRv1 would be a lower priority task then.

[hajimehoshi]

Hmm, I tried https://fonts.google.com/noto/specimen/Noto+Color+Emoji but oksvg.SvgIcon's ViewBox always seems to be (0, 0)-(0, 0). Is this expected? If no, I'll file an issue.

[andydotxyz]

Maybe check out the render code we have that is what's used by Fyne (and other?) libraries to render go-text. It uses oksvg and you can see the output in the tests.

https://github.com/go-text/render/blob/main/svg.go

[hajimehoshi]

I tried:

package main

import (
	"bufio"
	"image"
	"image/png"
	"os"

	"github.com/go-text/render"
	"github.com/go-text/typesetting/font"
)

func main() {
	f, err := os.Open("NotoColorEmoji-Regular.ttf")
	if err != nil {
		panic(err)
	}
	defer f.Close()

	face, err := font.ParseTTF(f)
	if err != nil {
		panic(err)
	}

	r := render.Renderer{
		FontSize: 24,
		PixScale: 1,
	}
	img := image.NewRGBA(image.Rect(0, 0, 200, 200))
	r.DrawString("🍣", img, face)

	out, err := os.Create("emoji.png")
	if err != nil {
		panic(err)
	}
	defer out.Close()

	w := bufio.NewWriter(out)
	if err := png.Encode(w, img); err != nil {
		panic(err)
	}
	if err := w.Flush(); err != nil {
		panic(err)
	}
}

with NotoColorEmoji-Regular.ttf, but nothing is rendered. I'll investigate more later.

EDIT: I modified render like this:

diff --git a/svg.go b/svg.go
index 84c18a5..0b82183 100644
--- a/svg.go
+++ b/svg.go
@@ -2,6 +2,7 @@ package render
 
 import (
        "bytes"
+       "fmt"
        "image"
        "image/draw"
        "io"
@@ -33,6 +34,7 @@ func renderSVGStream(stream io.Reader, width, height int) (*image.NRGBA, error)
        if err != nil {
                return nil, err
        }
+       fmt.Println(icon.ViewBox)
 
        iconAspect := float32(icon.ViewBox.W / icon.ViewBox.H)
        viewAspect := float32(width) / float32(height)

and the output was

{0 0 0 0}

[andydotxyz]

I guess somehow we have different font files - can you confirm which download URL you used for the file that is causing the issue?

[hajimehoshi]

I failed to find a direct URL to download the font. I got this font by

1. Pressing "Get font" button at https://fonts.google.com/noto/specimen/Noto+Color+Emoji and
2. Pressing "Download all" button at https://fonts.google.com/selection

[andydotxyz]

Ah I see it now thanks.

That svg font has no viewbox info in the file.

I think this means the bug is not in oksvg as that is passing along the same missing info.
But the Glyph reporting 0 Width and Height in this lib does seem wrong. I wonder how we are supposed to work it out if there is no size info in the SVG?

[tinne26]

https://learn.microsoft.com/en-us/typography/opentype/spec/svg#coordinate-systems-and-glyph-metrics

[...]
The size of the initial viewport for the SVG document is the em square: height and width both equal to head.unitsPerEm. If a viewBox attribute is specified on the element with width or height values different from the unitsPerEm value, this will have the effect of a scale transformation on the SVG “user” coordinate system.
[...]