[Bug]: Small vertical line before powerline and box drawing characters in Nerd Fonts

[patrick96]

Checklist

• I have read the appropriate section in the contributing guidelines
• I believe this issue is a problem with polybar itself and not a misconfiguration on my part
• I have searched for other open and closed issues that may have already reported this problem
• I have checked the known issues page for this problem.
• I have followed the debugging guide to narrow down the problem to a minimal config.

Steps to reproduce

polybar -c config.ini main

Minimal config

[bar/main]
font-0 = "Literation Mono Nerd Font:size=22"
modules-left = mod1 mod2
background = #ffffff
foreground = #000000

width = 100

[module/mod1]
type = custom/text
label = " %{+u}█%{+u}█%{+u}█"

[module/mod2]
type = custom/text
label = █
label-foreground = #dddddd
label-background = #000000

Polybar log

notice: Parsing config file: config.ini
notice: Loading module 'mod1' of type 'custom/text'
notice: Loading module 'mod2' of type 'custom/text'
notice: Loaded 2 modules
notice: Loaded font "Literation Mono Nerd Font:size=22" (name=LiterationMono Nerd Font, offset=0, file=/usr/share/fonts/TTF/Literation Mono Nerd Font Complete.ttf)

Expected behavior

All the characters should be flush without a gap in between.

Actual behavior

There is a 1px red-ish gap before the box-drawing character with black foregound and a blue-ish gap before the box-drawing character with a gray foreground.

Window Manager and Version

HerbstluftWM 0.9.5

Linux Distribution

ArchLinux

Polybar version

polybar 3.6.3-80-g30e1cc25

Features: +alsa +curl +i3 +mpd +network(libnl) +pulseaudio +xkeyboard

X extensions: +randr (+monitors) +composite +xkb +xrm +xcursor

Build type: Release
Compiler: /usr/bin/c++
Compiler flags: -march=x86-64 -mtune=generic -O2 -pipe -fno-plt -fexceptions         -Wp,-D_FORTIFY_SOURCE=2 -Wformat -Werror=format-security         -fstack-clash-protection -fcf-protection -Wp,-D_GLIBCXX_ASSERTIONS -flto=auto -O3 -DNDEBUG -Wall -Wextra -Wpedantic -Wdeprecated-copy-dtor -Wsuggest-override
Linker flags: -Wl,-O1,--sort-common,--as-needed,-z,relro,-z,now -flto=auto -Wall -Wextra -Wpedantic -Wdeprecated-copy-dtor -Wsuggest-override  -Wall -Wextra -Wpedantic -Wdeprecated-copy-dtor -Wsuggest-override

Additional Context / Screenshots

I initially thought this was the same issue as #2785, but the fix for that issue does nothing here.

This only happening when there is a tag in between is a strong indication of a similar underlying problem though.

[jayywolff]

I experience similar issues nearly every time the nerd fonts library is updated

on the latest nerd font update, the powerline symbols seem fine in every application expect polybar there's some weird screen tearing effects in between the powerline symbols and the space character after it now on every status update

Edit: adding a screenshot & system specs for reference.

System Specs:
OS: ArchLinux
Kernel: 6.0.10-arch2-1
GPU: Intel UHD Graphics 620
Window Manager: i3-gaps 4.21.1-1
Font: ttf-hack-nerd 2.2.2-2
Polybar Version: polybar 3.6.3-2

vertical yellow line about 1px wide it in between the first powerline symbol and module right after it, and another between the powerline symbol and the date module right of it. It only happens with these 2 powerline symbols/modules, all the others seem fine. The line in between flickers on/off between status updates and renders inconsistently. I haven't pin pointed anything special about these 2 in my polybar config

Also there is small white space in between the volume bar dashes, this does not flicker though.

I did notice this occurred after pacman removed nerd-fonts-hack (2.2.2-1) & installed ttf-hack-nerd (2.2.2-2)
I downgraded the package and restarted my system and it had no effect, still screen tearing.
Also I do use picom as a compositor for X11, but this bug still occurs even when I turn off the compositor.

[Carlisle96]

It also happened with me when i updated my system. ( Polybar was already on highest version - it could be that in that update nerd fonts were in there. )

[jayywolff]

looks like this could be an issue with x11 or something in the graphics stack, im able to reproduce the issue in gvim

[Asem-Ashraf]

The problem still exists, but I was able to identify that it was due to anti-aliasing. If antialias=false for the font, the line goes away but the powerline symbols looks awful. I have powerline symbols on the left and right of each module by the format suffix and prefix, each module has its own color and but the vertical line color is the same across all modules, which lead me to suspect that it is solely anti-aliasing problem of the font.

Here it is with antialias=false

[edit]
I have found a work around for this problem by shifting the powerline symbols 1 pixel to cover the vertical line. I have had this problem for only the right half of a circle, so I did not need to apply this shift to the left half.

Results.

[Hempward]

I also have the issue on both ArcoLinux i3 and Arch i3. Latest versions across the board. I'm using Iosevka Nerd Fonts.
The only fact I can add to the discussion is that the light green line, which is only on the left side of the symbols, appears to be the same as the hard-coded color used by the Workrave progress bar. I would be greatly appreciative if someone could provide the syntax to apply Asem-Ashraf's workaround to my case, if only to see if it works.

[jayywolff]

disabling anti-aliasing doesn't fix it for me in polybar or gvim. I forgot to mention it, but I also don't have any issues with the font glyphs in alacritty only polybar / gvim

[Asem-Ashraf]

https://github.com/polybar/polybar/wiki/Formatting#offset-o
This is the method that I followed to offest the characters a to hide the vertical line.
If the same glyph is used more than one time, I would suggest declaring it in variable with the offest one time rather than repeating it across the configuration.

[Hempward]

Thanks for the link and suggestion. I'm sure I've sailed past it a few times over the years. Now I can put the section to some use.

[patrick96]

@Asem-Ashraf You're right this does look like an anti-aliasing issue. The font renderer inserts pixels with different colors to make edges look smoother. In most cases, this is desirable, but for the straight edges where powerline symbols and the like are supposed to connect together, this creates these small vertical lines.

Small Example

[bar/main]
font-0 = "Literation Mono Nerd Font:antialias=off:size=17;3"
; font-0 = "Literation Mono Nerd Font:antialias=on:size=17;3"
modules-left = mod1
background = #ffffff
foreground = #000000

width = 200
height = 48

override-redirect = true

[module/mod1]
type = custom/text
label = " %{+u}███%{+u}█ %{+u} "

With anti-aliasing:

Without anti-aliasing:

For the half-circles you may need to zoom in a bit, the left one has a small line in the middle when anti-aliasing is turned on.

There are two problems here. For one, as seen in the two circles, adding a formatting tag in between, causes a line to appear.
The reason for that is that the two half-circles are rendered separately (because the formatting tag could have changed something, so the rendering is split up into separate chunks with different formatting values) and so each rendering may decide to add this vertical line for anti-aliasing.
If there is no tag in the middle (right circle), the font renderer decides, in this case, that this is not necessary in between the half circles.

The second problem is the anti-aliasing itself. We can see this in the rectangle on the left. The rectangle is made out of full size block elements. Some of them have a formatting tag in between, but not all and still all of them have vertical lines due to anti-aliasing.

I don't see a satisfying solution for this. Some partial solutions:

Turning off anti-aliasing

This will solve the issue these vertical lines, but most other stuff will look ugly. As seen above, the half circles will not look very smooth, the same goes for anything else that does not exclusively have vertical and horizontal edges, including text.

@jayywolff You have reported that turning off anti-aliasing does not work for you. However, I think in your case the symbols are also slightly too small and don't fill out the full width, also causing a gap. Try playing around with the size for the powerline symbols.

Turning off anti-aliasing only for specific characters

This requires multiple font definitions and manually setting the non-antialias font for all desired characters.
It does solve unrelated characters not looking smooth, but things like powerline symbols which still have no anti-aliasing to get rid of these vertical lines still look ugly.

Negative 1px offset

As described above by @Asem-Ashraf, one can manually apply a negative 1px offset before or after these symbols (depending on where the vertical lines occur) to have the subsequent text move back 1 pixel and basically overwrite the 1px vertical line.

This should indeed work as long as the discolored vertical line from anti-aliasing is only 1 pixel wide.
It is however very tedious to do and you also lose 1 pixel from the icons which may make them look slightly off (especially for the half circles).

---

I have been looking into how to solve this in the code and have so far been unsuccessful.

I have tried to render something with pango, which I hoped would not have this issue, but I was able to replicate the same behavior:

This was produced with the following markup string:

 ████ <span foreground=\"#ff0000\"></span> 

As you can see, simply breaking up the two half circles (on the left) with a zero-width element, has the same effect as in polybar and the full size block elements also all exhibit the same anti-aliasing artifact.

i3bar has a similar problem:

The full size block elements also have these vertical bars. For some reason the half circles overlap, so we can't do any comparisons there.

So does tint2:

tint2 doesn't seem to have any kind of formatting syntax, so we can't insert anything between the half circles like we did in polybar. But the block elements all also have the vertical lines.

---

I have no idea how to solve this or if it even is solvable. Unless anyone has an idea for how to approach this, I will have to put this on the back burner.