Label text alignment question

[thfsilvab]

Recently I decided to migrate my bar from Waybar to Eww, it's my first time trying Eww so I believe I'm certainly doing something wrong but I can't figure out exactly what. I usually have the Active Window title in the center of the bar, the text is aligned to the center as well, but no matter which form of alignment I try, a text in a label widget seems to always stick to the right.

In the screenshot, the top bar is Waybar, and Eww is the bar right below it. The orange square roughly shows the size of the text "container" with some padding on the sides, and this is the code that renders it:

(defwindow bar 
    :monitor 0
    :geometry (geometry 
        :x "0%"
        :y "2px"
        :width "100%"
        :height "50px"
        :anchor "top center")
    :stacking "fg"
    :exclusive true
    :focusable false
    (centerbox
        :class "bar-container"
        :orientation "horizontal"
        (box
            (image 
                :path "pictures/arch-icon.svg" 
                :image-width 26 
                :image-height 26
                :width 26
                :height 26
                :halign "start"
                :class "arch-logo"
                :fill-svg "#89b4fa"))
        (label 
            :class "window-title"
            :justify "center"
            :text window-title)
        (box)))

(deflisten window-title :initial ""
    `scripts/hypr-active-window-title.sh`)

I also tried xalign: 0.5 but it also didn't work. Can someone please point me what I'm doing wrong? Thanks :)

[ovalkonia]

I checked by pixels and it's dead center for me. Are you sure you have fixed-center set to true for Waybar? Maybe that's what's causing the difference.

If that's the case, I suppose you could replace centerbox with box and play around with :hexpand\:space-evenly properties to achieve the same result

[thfsilvab]

I'll try to set up something to record the screen, when I use inspector to verify, it shows the label widget the same size as what's in the print screen, and the text aligned to the right.

[thfsilvab]

But for better visualization, here's a screenshot with same size Terminal and Browser (sized by Hyprland) and the two bars at the top (eww is below)

[ovalkonia]

Alright, since the label container is just wide enough to contain the text, the alignment of the text within shouldn't be a problem. My best guess would be you did something like this:

.bar {
    padding-left: 20px;
    margin-left: 20px;
}

in your eww.scss, which led to the whole contents of the bar being shifted instead of just the arch logo. Would you mind sharing your eww.scss as well?

[thfsilvab]

This is all I have for now :)

@import "themes/mocha.css";

* {
    font-family: "Roboto";
}

.bar {
    background-color: transparent;
}

.bar-container {
    margin: 0 2px;
    background-color: rgba(17, 17, 27, .8);
    border-radius: 10px;
    color: @text;
}

.window-title {
    font-size: 16px;
    font-weight: 500;
}

.arch-logo {
    margin: 0 20px;
}

[thfsilvab]

Completely my fault, the script that listens to hyprland's socket was adding trailing spaces at the beginning of the title, I fixed the script and now it's properly centered, completely forgot to check the string as part of my debug

[thfsilvab]

Completely my fault, the script that listens to hyprland's socket was adding trailing spaces at the beginning of the title, I fixed the script and now it's properly centered, completely forgot to check the string as part of my debug

My bad