Center font

[SquirrelModeller]

I am trying to center a font. The problem is the fact that the font is slightly moved to the right side, despite being "centered". I suspect the issue itself is the fact that the font beginning in centered, however the font rendering is not. There is no way of controlling the font rendering. The only solution is to move the font to the right or left using % or px, ect, ect.

I want to know if there is an option to render the font in the center. This will greatly reduce bloat settings and then people won't have to manually adjust the centering for everything, and have to update it when the objects are resized.

EDIT: Replacing the symbols with characters like "O" places them in the middle of the circle. The font itself has a miss-alignment. The question still stands, if the font rendering can be changed/modified.

Yuck

(defwidget metric [icon ?font-size]
  (box :class "metric"
    :orientation "h"
    (label :class "metric-icon"
      :style {font-size != "" ? "font-size: ${font-size}rem;" : ""}
    :text icon)
    (children)))

(defwidget sys-tray []
  (box :orientation "h"
    
    (circular-progress
      :value "${round(EWW_RAM.used_mem_perc, 0)}"
      :class "side_sys_mem"
      :thickness 5
      (metric :icon "" :font-size 2))
    
    (circular-progress
      :value "${round(EWW_CPU.avg, 0)}"
      :class "side_sys_cpu"
      :thickness 5
      (metric :icon "" :font-size 2))
  ))

CSS

$primary:   #ffb97c;
$radient-background: rgb(255, 255, 255);

.side_sys_cpu,
.side_sys_mem {
  color: $primary;
  background-color: $radient-background;
  margin: 5px;

}
.metric-icon {
  padding: 10px;
}

[musjj]

Yes, aligning icon fonts in general is a huge pain point in eww. I don't think there's any other way other than manually fiddling with the margins and paddings until it looks "okay" (and you have to redo this again if you want to use a monitor with a different resolution). Most dotfiles I've seen does the same thing.
I wonder if there's a more elegant approach to this. Maybe we can correct this on the font level? Not really sure.

[elkowar]

So, eww at this point has a couple ways to play around with text alignment:

• css stuff
• the xalign property on label
• the justify property on label
• potentially using pango markup via the markup property on label (unsure, haven't tested, but pango markup can do a lot)
• using a parent container and playing around with the regular layouting properties such as valign and vexpand

However, it is sadly still possible that non of these can consistently center your text, especially when using special symbol fonts, emoji or the like. Sadly, these properties already basically are all the ways of aligning text GTK gives us access to. If it doesn't want to center them, that might just be an issue with gtk failing to properly measure the width of those chars, either because they are weird in the font, or because of internal gtk limitations.

If any of these properties do turn out to make it possible to consistently center ANY character in a non-hacky way, please do keep me updated, I'd be more than down to add a specific hint about this in the docs. If not, I sadly don't think there is much I can do to improve the situation without massively overcomplicating the label widget or font-rendering in general :/

[SquirrelModeller]

I have not read into the eww source code at all, and unfortunately I currently do not have that much free time either. With the free time I had I've been reading the documentation of Pango. I assume this is the render pipeline that GTK uses for rendering the fonts in eww.

Particularly I saw the glyph section of how Pango renders fonts.
https://docs.gtk.org/Pango/pango_fonts.html

Interestingly enough changing the font gravity does shift the issue either west, east, south or north, depending on what setting you choose. That displays a sort of control, which makes me think it is possible to center the font completely.

(label :markup "<span gravity='east'></span>" :style "font-size: 60; margin: -10;")

(label :markup "<span gravity='west'></span>" :style "font-size: 60; margin: -10;")

Pango groups together fonts into "PangoGlyphString"

I think the black line is the representation of the absolute width of the font. Grabbing that black boxes alignment and centering could maybe solve the problem.

I've been working a lot lately, so any errors in this comment will be a result of that. I apologize.

[charlesrocket]

space-evenly on the box? I found it to be the only solution for some symbols

[SquirrelModeller]

I've found a temporary solution!
Use the monospace font. A monospace font has an equal width and height no matter the character.

Example:
(label :text "" :xalign "0" :yalign "0" :halign "center" :valign "center" :style "font-size: 20pt; margin: 4px; font-family: monospace;")

No matter the font size, the position is the same. This will change the font to monospace, so that is why I am calling this a temporary solution. @elkowar , just notifying you about this. I am unsure if this qualifies as a hacky solution of not.

I've been looking into the source code of eww, and I am trying to see if I can find a solution using pango. Specifically by creating the text with pango and using its pango_glyph_string_get_width to calculate the width.