Doesn't seem to be any way to use LCD font rendering? about skija HOT 9 CLOSED

Try using Surface::makeRaster version that accepts SurfaceProps. In these props, set PixelGeometry to RGB_H. Then see if it helps

from skija.

Thanks, but it didn't help.

Also tried the other geometries and several tweaks to the other parameters, no difference observed.

Slightly modified code and result below.

package adhoc;

import io.github.humbleui.skija.*;

import javax.imageio.*;
import javax.swing.*;
import java.io.*;

public class TextAliasing {
    public static void main(String[] ignored) throws Exception {
        int width = 350;
        int height = 100;
        SurfaceProps props = new SurfaceProps(PixelGeometry.RGB_H);
        ImageInfo info = new ImageInfo(new ColorInfo(ColorType.ARGB_4444, ColorAlphaType.OPAQUE, null), width, height);
        Surface surface = Surface.makeRaster(info, 0, props);
        Canvas canvas = surface.getCanvas();
        canvas.clear(0xFFFFFFFF);

        Typeface typeface = Typeface.makeFromName("Arial", FontStyle.NORMAL);
        Font font = new Font(typeface, 18);

        Paint paint = new Paint();
        paint.setColor(0xFF000000);

        float y = font.getSize() * 1f;
        font.setEdging(FontEdging.ANTI_ALIAS);
        font.setSubpixel(false);
        canvas.drawString("SubPixel = " + font.isSubpixel() + "; Edging = " + font.getEdging(), 3, y, font, paint);
        y += font.getSize() * 1.2f;
        font.setEdging(FontEdging.ANTI_ALIAS);
        font.setSubpixel(true);
        canvas.drawString("SubPixel = " + font.isSubpixel() + "; Edging = " + font.getEdging(), 3, y, font, paint);
        y += font.getSize() * 1.2f;
        font.setEdging(FontEdging.SUBPIXEL_ANTI_ALIAS);
        font.setSubpixel(false);
        canvas.drawString("SubPixel = " + font.isSubpixel() + "; Edging = " + font.getEdging(), 3, y, font, paint);
        y += font.getSize() * 1.2f;
        font.setEdging(FontEdging.SUBPIXEL_ANTI_ALIAS);
        font.setSubpixel(true);
        canvas.drawString("SubPixel = " + font.isSubpixel() + "; Edging = " + font.getEdging(), 3, y, font, paint);

        byte[] pngBytes = surface.makeImageSnapshot().encodeToData().getBytes();
        java.awt.Image image = ImageIO.read(new ByteArrayInputStream(pngBytes));
        image = image.getScaledInstance(width * 6, height * 6, java.awt.Image.SCALE_REPLICATE);
        JFrame frame=new JFrame();
        frame.getContentPane().add(new JLabel(new ImageIcon(image)));
        //frame.getContentPane().add(component);
        frame.pack();
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
        //java.nio.file.Files.write(java.nio.file.Path.of("output.png"), pngBytes);

    }
}

from skija.

I can't get your example to work either, but inserting your font creation & text drawing in a project which creates a surface via Surface.wrapBackendRenderTarget from JWM I do see subpixel anti-aliasing, so the problem should be something with the surface creation/type.

from skija.

Try new new SurfaceProps(true, PixelGeometry.RGB_H);?
Also maybe BGRA_8888? ARGB_4444 is non-standard, and I remember Skia acting weirdly on weird byte alignments

from skija.

Those two things combined work!

from skija.

Yes, for me too!

Still not sure what the exact settings should be. (PixelGeometry.BGR_H also "works" but presumably I need somehow to query the user's monitor's pixel geometry? I imagine there's something somewhere in AWT to do this).

A quick question, I notice the kerning is not the same as Chrome's in all cases. For example "Wo" are closer together in Chrome. Decimal numbers e.g. 0.0 also closer together in Chrome. I had imagined kerning rules were somehow just a property of the font, but is there some external "kerning engine" in play? What are my chances of matching Chrome better?

(This probably isn't a "bug" as such as I suppose Skija doesn't promise to exactly emulate e.g. Chrome. So I'm not raising it as a an Issue at this point!)

from skija.

Did you try the possible font.setHinting/font.setAutoHintingForced values? But there are probably a bunch of things to consider (subpixel coordinates? fractional font sizes? weight? idk); at the end of the day it'll be HarfBuzz shaping the text, so it's all into the configuration (assuming the necessary knobs even exist).

from skija.

presumably I need somehow to query the user's monitor's pixel geometry?

Yes, that’s the idea. ClearType only works when displayed 1:1 on LCD monitor with exact pixel order.

I imagine there's something somewhere in AWT to do this

You should try for sure, but from my experience both AWT and JavaFX are consistently getting subpixel aliasing wrong, so I would not have high hopes for that. Better to go to WinAPI directly

What are my chances of matching Chrome better?

I’m pretty sure it should be doable. I would even aim for Windows native font rendering, as it is what you really need to match.

from skija.

One bit relevant to the font rendering is: you should always render font at 1:1 scale. If you scale your canvas, it will look wrong

From here https://issues.skia.org/issues/40042307:

Since the default on SkFont is hinted metrics, drawing through a non-identity matrix will lead to less than desirable results. If you want to be able to freely scale and have the spacing not look bad, you'll need to SkFont::setLinearMetrics(true) and/or SkFont::setHinting(SkFontHinting::kNone). Generally if you shape with any hinting (the default) you will not want to draw that with anything other than an identity matrix.

from skija.