hyprwm / hyprlock

Hyprland's GPU-accelerated screen locking utility
BSD 3-Clause "New" or "Revised" License
717 stars 54 forks source link

Text doesn't align correctly #446

Open kamack38 opened 1 month ago

kamack38 commented 1 month ago

Regression?

No

Hyprlock Info and Version

Hyprlock config ```sh # 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 ```sh 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 ![2024-07-29T21:07:38,465196803+02:00](https://github.com/user-attachments/assets/b8d443ee-4fc0-4761-ab3a-108e3f809b20) halign = center ![2024-07-29T21:07:18,130660067+02:00](https://github.com/user-attachments/assets/e81beab6-20ac-48d0-b1bc-96b43a073d11) ### Crash reports, logs, images, videos _No response_
PaideiaDilemma commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

I think something like vanchor and hanchor would suffice.