Text doesn't align correctly

[kamack38]

Regression?

No

Hyprlock Info and Version

Hyprlock config

# BACKGROUND
background {
    color = rgba(25, 20, 20, 1.0)
}

# PLAYER TITLE
label {
    text = Text two long one
    color = rgba(255, 255, 255, 0.8)
    font_size = 12
    text_align = left
    font_family = JetBrains Mono Nerd Font Mono ExtraBold
    position = 200, 0
    halign = left/center
    valign = center
}

# PLAYER ARTIST
label {
    text = Text one
    color = rgba(255, 255, 255, 0.8)
    font_size = 10
    text_align = left
    font_family = JetBrains Mono Nerd Font Mono ExtraBold
    position = 200, -20
    halign = left/center
    valign = center
}

Compositor Info and Version

System/Version info

Hyprland, built from branch  at commit cba1ade848feac44b2eda677503900639581c3f4  (props: bump version to 0.40.0).
Date: Sat May 4 15:42:32 2024
Tag: v0.40.0, commits: 4606

flags: (if any)


System Information:
System name: Linux
Node name: kamack38-rogstrixg533qs
Release: 6.9.9-arch1-1.2-g14
Version: #1 SMP PREEMPT_DYNAMIC Tue, 16 Jul 2024 05:59:42 +0000


GPU information: 
01:00.0 VGA compatible controller [0300]: NVIDIA Corporation GA104M [GeForce RTX 3080 Mobile / Max-Q 8GB/16GB] [10de:249c] (rev a1) (prog-if 00 [VGA controller])
05:00.0 VGA compatible controller [0300]: Advanced Micro Devices, Inc. [AMD/ATI] Cezanne [Radeon Vega Series / Radeon Vega Mobile Series] [1002:1638] (rev c5) (prog-if 00 [VGA controller])


os-release: NAME="Garuda Linux"
PRETTY_NAME="Garuda Linux"
ID=garuda
ID_LIKE=arch
BUILD_ID=rolling
ANSI_COLOR="38;2;23;147;209"
HOME_URL="https://garudalinux.org/"
DOCUMENTATION_URL="https://wiki.garudalinux.org/"
SUPPORT_URL="https://forum.garudalinux.org/"
BUG_REPORT_URL="https://gitlab.com/groups/garuda-linux/"
PRIVACY_POLICY_URL="https://terms.archlinux.org/docs/privacy-policy/"
LOGO=garudalinux


plugins:

Description

The text should align to the left and they both should be inline, but they aren't.

How to reproduce

halign = left

halign = center

Crash reports, logs, images, videos

No response

[PaideiaDilemma]

Seems like intended behavior to me.

With position = 200, 0 you offset the x coordinate of your label by 200.

When halign = left you offset it from x=0 and when halign = center from the middle of your monitor minus half of the label's size to center it.

The text should align to the left

It does align to the left when specified via halign.

and they both should be inline

They shouldn't, because they are 2 separate labels. The text_align option only is used to align text in multiline labels.

You can put them in a single label, which would allow you to use text_align:

label {
    text = <span font_size="12pt">Text two long one</span><br/><span font_size="10pt">Text one</span>
    color = rgba(255, 255, 255, 0.8)
    font_size = 10
    text_align = left
    position = 0, 0
    halign = center
    valign = center
}

Or play around with pos and halign to align them however you want.

If your labels fetch dynamic text, halign=center will not allow you to have both labels start on the same x coordinate, since halign will center each label. In that case you should use halign=left.

[kamack38]

If your labels fetch dynamic text, halign=center will not allow you to have both labels start on the same x coordinate, since halign will center each label. In that case you should use halign=left.

Unfortunately, this means that I won't be able to position this correctly on screens with different resolutions. I think there should be an option that will set the label anchor so that it would be possible to reuse the same config on screens with different resolutions, since there aren't any percentage units.

[kamack38]

Okay, I have actually found a solution. Instead of having two separate labels, I can run both commands inside one label and separate them using <br/>. And then if I want to make change the distance between them, I can just add a <span> in-between with some invisible character and set the font_size. Thank you for giving me this idea.

[kamack38]

This actually doesn't work because the place to which the position is measured is still in the center of the text instead of the left edge. This could be fixed by allowing the user to set the label anchor.

[bvr-yr]

you can use <span line_height='1.3'></span> btw to widen lines

but I can't see anything working wrong, halign and valign are kinda anchors already, and then u move label with pos

if u want left-aligned multi-line text in a label container but the container itself should be likely in the center but with fixed position when changing tracks, just use halign=left and position=800,0 or smth, depends on your reso

[kamack38]

Yes there isn't anything wrong just it doesn't work as I thought and I think this should be converted to a feature request to allow setting the anchor point, because halign and valign both align and set the anchor point.

[PaideiaDilemma]

Yeah you are right, that you cannot place the label consistently when resolutions change.

Despite adding an anchor point setting, I guess we could also add support for specifying pos relative to the monitor res. Although it would be a bit awkward when you would use somthing like halign = center and pos = 10%,0.

[kamack38]

I think something like vanchor and hanchor would suffice.

[kamack38]

Big thanks.