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.

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

Position and rendering of right-aligned Text depends on element width #6739

Open
Enyium opened this issue Nov 8, 2024 · 0 comments
Open
Labels
a:text Text rendering, fonts, Text input (mS,bF) need triaging Issue that the owner of the area still need to triage

Comments

@Enyium
Copy link
Contributor

Enyium commented Nov 8, 2024

Consider this SlintPad demo:

export component AppWindow inherits Window {
    width: 200px;
    height: 70px;

    Timer {
        interval: 1.5s;
        running: true;

        property <int> num-digits: 0;

        triggered => {
            self.num-digits = (self.num-digits + 1).mod(20);
            if self.num-digits == 0 {
                t1.text = "";
                t2.text = "";
            } else {
                t1.text = t1.text + "0";
                t2.text = t2.text + "0";
            }
        }
    }

    VerticalLayout {
        alignment: start;

        t1 := Text {
            text: "";
            horizontal-alignment: right;
        }

        HorizontalLayout {
            alignment: end;
            
            t2 := Text {
                text: "";
                horizontal-alignment: right;
            }
        }

        HorizontalLayout {
            alignment: end;
            
            t3 := Text {
                text: "000";
                horizontal-alignment: right;

                width: ta.has-hover ? 60px : 50px;
                animate width {
                    duration: 2s;
                }

                ta := TouchArea {}
            }
        }
    }
}

At least for me, it isn't so obvious in SlintPad, which uses FemtoVG. But this local Skia rendering clearly shows it (Rust lib feature renderer-skia-opengl; washed out black and blurriness seems to come from video compression):

bad-alignment.mp4

In the first line, the Text stays at one width. The other right-aligned Texts should effectively get the same x + width position, but, for some reason, change their texts' position and rendering when the element width changes, either by adding text, or by animating width.

@FloVanGH FloVanGH added the need triaging Issue that the owner of the area still need to triage label Nov 11, 2024
@ogoffart ogoffart added the a:text Text rendering, fonts, Text input (mS,bF) label Nov 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a:text Text rendering, fonts, Text input (mS,bF) need triaging Issue that the owner of the area still need to triage
Projects
None yet
Development

No branches or pull requests

3 participants