search

JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
15.24k stars 1.11k forks source link

[Web][Wasm] Issue with Color Rendering in Compose Web: Inconsistent Lightness in Arabic Fonts #4949

Closed Saif-Alhaider closed 2 weeks ago

Saif-Alhaider commented 2 weeks ago

Describe the bug I am experiencing issues with color rendering in my Compose Web application when using Arabic fonts. When applying a color with a specific lightness value (e.g., 87%), the text does not render uniformly. Some parts of the Arabic characters appear with inconsistent lightness, leading to visual discrepancies and an uneven appearance.

Affected platforms

Versions

To Reproduce Steps to reproduce the behavior:

  1. Run this code snippet: 
    Text(
    text,
    color = color,
    fontFamily = FontFamily(
        Font(
            resource = Res.font.Tajawal_Medium,
            FontWeight.Medium
        )
    ),
    style = TextStyle(
        textDirection = TextDirection.Rtl
    ),
    fontSize = fontSize,
    modifier = modifier.graphicsLayer(translationY = 2f)
        .pointerHoverIcon(if (clickable) PointerIcon.Hand else PointerIcon.Default),
)

Expected behavior The Arabic text should render uniformly with a consistent lightness of 87% across all characters and glyphs

Screenshots

Screenshot 2024-06-08 at 9 40 58 PM

Additional Information I also tried with multiple arabic fonts like Tajawal cairo all gave same result I also tried to use BasicText instead of Text gave me same result

terrakok commented 2 weeks ago

This is not the Compose issue. The font behaves the same in a regular html page:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>issues-4949</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap"
          rel="stylesheet">
    <style>
        body {
            font-family: 'Tajawal';
            font-size: 120px;
            color: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
<div>
    <h1>تقف المنازل بين الغابات</h1>
</div>
</body>
</html>
image