Text looks bad in Windows 10

[adamsiembida]

Text seems to look poorly rendered in Windows 10. I opened the Code Viewer example and just immediately thought the text looks off. Maybe it's not applying subpixel anti-aliasing, but I'm really not sure. The text looks too sharp and kinda jagged.

And I don't think its only this example. Ever since I started testing Compose Desktop I thought the text just didn't look quite right.

[igordmn]

Text in Compose for Desktop is rendered without subpixel anti-aliasing for now. The issue is known and blocked by the issue in skia (another one)

P.S.

1. Flutter has a similar issue

2. UWP applications (and Start Menu) don't use subpixel anti-aliasing too:
   
   There is an issue in WinUI

[adamsiembida]

Thanks for that information, it's good that the cause is known! I feel like I'm always having this issue whenever a new multiplatform-framework targets windows. I remember similar issues when Electron was new, and Qt also has issues unless you manually mess with text rendering. I know that a lot of devs use Macs nowadays, but a majority of consumers are still using Windows as far as I am aware--especially in the scientific and engineering (my area) communities where desktop apps are still the primary means of doing work.

[igordmn]

By the way, there is a way to draw a text with subpixel antialiasing, if we use Canvas directly:

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.window.singleWindowApplication
import org.jetbrains.skija.Color
import org.jetbrains.skija.Font
import org.jetbrains.skija.FontEdging
import org.jetbrains.skija.Paint
import org.jetbrains.skija.TextLine
import org.jetbrains.skija.Typeface

val font = Font(Typeface.makeDefault()).apply {
    edging = FontEdging.SUBPIXEL_ANTI_ALIAS
    size = 24f
}

fun main() = singleWindowApplication {
    Canvas(Modifier.fillMaxSize()) {
        drawIntoCanvas {
            it.nativeCanvas.drawTextLine(
                TextLine.make("Text", font),
                0f,
                -font.metrics.ascent,
                Paint().apply {
                    color = Color.makeRGB(0, 0, 0)
                }
            )
        }
    }
}

[adamsiembida]

Thanks, this is huge 🎉 It basically opens up Compose Desktop for use on Windows!

[igordmn]

igordmn closed this as completed in JetBrains/skia-pack@05623f7 on Sep 2

It seems GitHub closed it somehow, even it is not merged yet.

It wasn't meant to be closed, so reopening, until we merge all functionality (it won't be in 1.2.0)

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.