Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Some unicode characters are not rendered correctly #5667

Closed
TimJentzsch opened this issue Aug 13, 2022 · 2 comments
Closed

Some unicode characters are not rendered correctly #5667

TimJentzsch opened this issue Aug 13, 2022 · 2 comments
Labels
A-Rendering Drawing game state to the screen A-Text Rendering and layout for characters A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior

Comments

@TimJentzsch
Copy link
Contributor

Bevy version

0.8.0

What you did

Rendering zero-width Unicode characters, namely U+200C, U+2068 and U+2069.

Example code to reproduce:

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    let test_text = "Start\u{200C}\u{2068}\u{2069}End";
    let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");

    commands.spawn_bundle(Camera2dBundle::default());

    commands
        .spawn_bundle(NodeBundle {
            style: Style {
                size: Size {
                    width: Val::Percent(100.0),
                    height: Val::Percent(100.0),
                },
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                ..default()
            },
            color: UiColor(Color::NONE),
            ..default()
        })
        .with_children(|parent| {
            parent.spawn_bundle(TextBundle {
                text: Text::from_section(
                    test_text,
                    TextStyle {
                        font: font_handle,
                        font_size: 60.0,
                        color: Color::WHITE,
                    },
                ),
                ..default()
            });
        });
}

You can download the font I used (Fira Sans) from Google Fonts.
Feel free to test this with other fonts though.

What went wrong

The text "Start\u{200C}\u{2068}\u{2069}End" renders like this:

Screenshot of the rendered text

  • The zero-width non-joiner (U+200C) renders as a thin line. This is wrong, because it's a zero-width, non-printing character.
  • The U+2068 and U+2069 characters render like they are unknown to the font. I'm pretty sure that they are supported by the font (see below). They should also not be visible, because they are zero-width control characters.

Additional information

The following HTML markup can be used as comparison point:

<head>
  <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=Fira+Sans:wght@700&display=swap"
    rel="stylesheet"
  />

  <style>
    body {
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 60px;
      font-family: "Fira Sans";
    }
  </style>
</head>

<b>Start&#8204;&#8296;&#8297;End</b>

I included the same font via Google Fonts.
It renders like this:

Screenshot of the web-rendered text

So all of the zero-width characters are not visible, as expected.

I can't say for certain that the latter two characters are actually supported by the font, the web might fall back to something else to render them correctly.
But the first character definitely seems like a bug.
@TimJentzsch TimJentzsch added C-Bug An unexpected or incorrect behavior S-Needs-Triage This issue needs to be labelled labels Aug 13, 2022
@Weibye Weibye added A-Rendering Drawing game state to the screen A-UI Graphical user interfaces, styles, layouts, and widgets and removed S-Needs-Triage This issue needs to be labelled labels Aug 13, 2022
@TimJentzsch
Copy link
Contributor Author

For context, I am working on localization with Project Fluent and fluent-rs wraps inserted values with \u{2068} and \u{2069}.

Because they don't seem to be rendered correctly, I currently need to remove them from the string, which could result in bugs for some locales.

@viridia viridia added the A-Text Rendering and layout for characters label Apr 18, 2024
@rparrett
Copy link
Contributor

Fixed by #10193
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-Rendering Drawing game state to the screen A-Text Rendering and layout for characters A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@rparrett @viridia @Weibye @TimJentzsch