Repository navigation
Closed
Labels
A-RenderingDrawing game state to the screenDrawing game state to the screenA-TextRendering and layout for charactersRendering and layout for charactersA-UIGraphical user interfaces, styles, layouts, and widgetsGraphical user interfaces, styles, layouts, and widgetsC-BugAn unexpected or incorrect behaviorAn unexpected or incorrect behavior
Description
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:
- 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+2068andU+2069characters 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‌⁨⁩End</b>I included the same font via Google Fonts.
It renders like this:
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.
Metadata
Metadata
Assignees
Labels
A-RenderingDrawing game state to the screenDrawing game state to the screenA-TextRendering and layout for charactersRendering and layout for charactersA-UIGraphical user interfaces, styles, layouts, and widgetsGraphical user interfaces, styles, layouts, and widgetsC-BugAn unexpected or incorrect behaviorAn unexpected or incorrect behavior


Activity
TimJentzsch commentedon Aug 13, 2022
For context, I am working on localization with Project Fluent and
fluent-rswraps 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.
rparrett commentedon Aug 22, 2024
Fixed by #10193
