calendar day-of-week header is misaligned in Chinese

[lilydjwg]

Just see the screenshot:

Those characters are: 一 二 三 四 五 六 日.

[LukashonakV]

As far as I found out it's not an module issue. There is a general question how to align Chinese numbers with the Cyrillic numbers. This issue depends on many factors. Please see an explanation: https://stackoverflow.com/questions/22525779/how-to-print-a-chinese-character + https://stackoverflow.com/questions/4655250/difference-between-utf-8-and-utf-16 And there is a good explanation: https://wiki.archlinux.org/title/Fonts - see Chinese section. So it seems you should setup correct locale and choose appropriate font.

[lilydjwg]

Oh, it seems to be a font issue. The tooltip doesn't specify a monospace font so it's not aligned as expected. Do you know how to specify font for this tooltip? I don't want to use monospace for all text on the bar (and even I tried, I failed to change font for the tooltip).

[LukashonakV]

@lilydjwg please see the last comment in PR. If it will be confirmed, calendar can become a little bit more customizable.

[lilydjwg]

Thanks, I can confirm that this is a font issue.

In my fontconfig for the monospace font I prefer DejaVu Sans Mono and then 文泉驿等宽正黑. The former doesn't contain Chinese characters so for Chinese it will fallback to the latter. Unfortunately they have different widths so it's not aligned perfectly.

When I set it to use the same font it's better aligned:

"tooltip-format": "<big>{:%Y %B}</big>\n<span font=\"文泉驿等宽正黑 11\">{calendar}</span>",

However it's still not perfectly aligned at some sizes (11 is a best one I can find around that size). there seems to be some rounding errors.

[LukashonakV]

Hi @lilydjwg , can you check PR#1971. It should solve your issue

[lilydjwg]

No, it doesn't.

(Please ignore the blurriness; I configured the wrong widget on the secondary monitor.)

Single month without <tt> (" {:%Y %B}\n\n{calendar}")

And with <tt>

The whole year from #1956:

[LukashonakV]

@lilydjwg can you share exact locale you're using please ?

[lilydjwg]

LANG=zh_CN.UTF8
LANGUAGE=zh_CN:zh_TW

[LukashonakV]

LANG=zh_CN.UTF8
LANGUAGE=zh_CN:zh_TW

Thanks, I'm observing the same issue .. will check how to fix

[LukashonakV]

Hi @lilydjwg , I've done small investigation and for me functionality looks good so far. I suspect Pango engine doesn't render Chinese alphabet well. I've created module output for the clock component waybar_out.txt cat waybar_out.txt Result is

---

So as you can see, the output is good. Next. pure output gives the same result

---

I guess next step... I'll create and issue to Pango. Maybe Pango community will shed the light on it Issue is ctreated: ISSUE#727

[lilydjwg]

Oh, that's because terminals force a character grid, but pango doesn't do so for monospace fonts, <tt> or whatever. When two or more different fonts are used (for different scripts) they'll differ in width.

[LukashonakV]

Yeah but for this particular case the months and week days doesn't mix fonts. They uses LC_LANG which in this case is : zh_CN.utf8. So it doesn't seems different fonts are the cause. When I remove \<tt> the result looking awful :)

[lilydjwg]

So it doesn't seems different fonts are the cause.

It usually does due to font fallback. If you use a monospace Chinese font (e.g. 文泉驿等宽正黑) for all the characters it will align as expected, but there are few monospace Chinese fonts (文泉驿等宽正黑 is the only one I can find).

Chinese characters are monospace by nature, but Chinese fonts usually include proportional Latin letters (and space). So what happens here is that pango use a Latin monospace font to render monospace text and when characters are missing it tries to find another font (e.g. a Chinese font) to render those characters.

BTW you can find the 文泉驿等宽正黑 font in the wqy-zenhei package on Arch Linux.

[LukashonakV]

Thanks @lilydjwg, so anyway whatever font you use even those you found, calendar is not aligned ? I mean even with the wqy-zenhei ?

[lilydjwg]

Yes. It's perfectly aligned in my Firefox with that font, but not in waybar or pango-view. It's better but still the week day lines are off by one or more characters depending on the font size. Maybe caused by some kind of rounding error in pango?

[LukashonakV]

Tomorrow I'll try to use semi space instead of usual space character for calendar string composition for fonts where one character takes 2 glyphs. Maybe it will help.

[LukashonakV]

So.... @lilydjwg you forced brainstorm me )))

1. I've installed WenQuanYi Zen Hei
2. Next - for your particular case you should drop mono feature in pango markup in calendar.. so your config should look like this:

   "clock": {
       "format": "{:%H:%M}  ",
       "format-alt": "{:%A, %B %d, %Y (%R)}  ", "tooltip-format": "<small>\n{calendar}</small>", "calendar": {
                   "mode"          : "year",
                   "mode-mon-col"  : 3,
                   "weeks-pos"     : "left",
                   "on-scroll"     : 1,
                   "on-click-right": "mode",
                   "format": {
                             "months":     "<span color='#ffead3'><b>{}</b></span>",
                             "days":       "<span color='#ecc6d9'><b>{}</b></span>",
                             "weeks":      "<span color='#99ffdd'><b>W{}</b></span>",
                             "weekdays":   "<span color='#ffcc66'><b>{}</b></span>",
                             "today":      "<span color='#ff6699'><b><u>{}</u></b></span>"
                             }
                   }
   },

3. You should fix your style.css and use the Mono font..

   * {
   border: none;
   font-family: "WenQuanYi Zen Hei Mono";
   }

   ---

   Examples with mono:

[lilydjwg]

WOW, that's perfectly aligned! But I didn't reproduce it on my machine (will try again later). Also, I don't want all my widgets to use that font (it's less nice). Can I apply the css to only this tooltip?

[LukashonakV]

@lilydjwg , sure it's possible. You can use particular font for calendar only.

"clock": {
        "format": "{:%H:%M}  ",
        "format-alt": "{:%A, %B %d, %Y (%R)}  ",
        "tooltip-format": "<small>\n<span font-family='WenQuanYi Zen Hei Mono'>{calendar}</span></small>",
        "calendar": {
                    "mode"          : "year",
                    "mode-mon-col"  : 3,
                    "weeks-pos"     : "right",
                    "on-scroll"     : 1,
                    "on-click-right": "mode",
                    "format": {
                              "months":     "<span color='#ffead3'><b>{}</b></span>",
                              "days":       "<span color='#ecc6d9'><b>{}</b></span>",
                              "weeks":      "<span color='#99ffdd'><b>W{}</b></span>",
                              "weekdays":   "<span color='#ffcc66'><b>{}</b></span>",
                              "today":      "<span color='#ff6699'><b><u>{}</u></b></span>"
                              }
                    }
    },

My example, the main font is Ubuntu NF, but for calendar is used WenQuanYi Zen Hei Mono

[lilydjwg]

Weird, I can't get it like that.

With style.css

* {
    border: none;
    font-family: "WenQuanYi Zen Hei Mono";
}

I get

And without it I get

config is (I only changed the text color becaouse I didn't figure out how to change the block-level background.)

  "clock": {
    "format": "{:%H:%M}  ",
    "format-alt": "{:%A, %B %d, %Y (%R)}  ",
    "tooltip-format": "<small>\n<span font='WenQuanYi Zen Hei Mono'>{calendar}</span></small>",
    "calendar": {
      "mode"          : "year",
      "mode-mon-col"  : 3,
      "weeks-pos"     : "right",
      "on-scroll"     : 1,
      "on-click-right": "mode",
      "format": {
        "months":     "<span color='#94887a'><b>{}</b></span>",
        "days":       "<span color='#a88d9b'><b>{}</b></span>",
        "weeks":      "<span color='#3eb88f'><b>W{}</b></span>",
        "weekdays":   "<span color='#c58e21'><b>{}</b></span>",
        "today":      "<span color='#e6175c'><b><u>{}</u></b></span>"
      }
    }
  },

[LukashonakV]

HI @lilydjwg can you check please ISSUE1874. Is it possible you have changed local.conf fontconfig? Please check exact https://github.com/Alexays/Waybar/issues/1874#issuecomment-1349150106 Now it looks like there some you system configuration brings the issue.

Or you can try to do:

fc-list :family | grep -i "zen"

On my system there are three fonts for the family. Please try each

On addition: for test purpose please reduce "mode-mon-col" : 3 to 2

"mode-mon-col"  : 2

[lilydjwg]

WenQuanYi Zen Hei and WenQuanYi Zen Hei Sharp are not monospace. The latter is a bitmap version. Only WenQuanYi Zen Hei Mono is monospace.

I have local fontconfig configurations but it's not that aggressive. I've tried to bypass that with bwrap but no change.

The command I use to test is:

bwrap --dev-bind / / --bind ~/tmpfs/waybar ~/.config/waybar --tmpfs ~/.config/fontconfig build/waybar

[LukashonakV]

Hm... I've got the same result as yours on OpenSuse... Let me check in Manjaro. Looking at screen the filling is: font is not applied ...

[LukashonakV]

Hi @lilydjwg , interesting thing .. It does work well with the style I'm using. I've checked it in Manjaro. Without custom style.css the problem appears. But once I'm using my own style - Chinese looks good. For test purposes please get my config + 2 style files: Viktar's dot From waybar folder please get

1. config
2. style.css

3. styleCfg.css

   

[LukashonakV]

@lilydjwg the same for OpenSuse. But on OpenSuse I found that Calendar font should have the size is divisible by 3 without a remainder. When the size on OpenSuse was 10, Chinese was not aligned. But when I used size = 9 it looks well the same as on Gentoo, Manjaro

---

[LukashonakV]

So finally:

1. Font should be used: WenQuanYi Zen Hei Mono

2. Font size for Calendar shoud be divisible by 3 without a reminder.

3. If it doesn't help, please try to use my waybar dot Upd:

4. The MAIN criteria is font size.

5. . It's desirable to use WenQuanYi Zen Hei Mono. But could be used another which can well align Chinese

"clock": {
        "format": "{:%H:%M}  ",
        "format-alt": "{:%A, %B %d, %Y (%R)}  ",
        "tooltip-format": "\n<span size='9pt' font='WenQuanYi Zen Hei Mono'>{calendar}</span>",
        "calendar": {
                    "mode"          : "year",
                    "mode-mon-col"  : 3,
                    "weeks-pos"     : "right",
                    "on-scroll"     : 1,
                    "on-click-right": "mode",
                    "format": {
                              "months":     "<span color='#ffead3'><b>{}</b></span>",
                              "days":       "<span color='#ecc6d9'><b>{}</b></span>",
                              "weeks":      "<span color='#99ffdd'><b>W{}</b></span>",
                              "weekdays":   "<span color='#ffcc66'><b>{}</b></span>",
                              "today":      "<span color='#ff6699'><b><u>{}</u></b></span>"
                              }
                    }
    },

[lilydjwg]

Oh yes, font size matters a lot. It aligns well on my side with size 9, 11, 14 or 16.

But could be used another which can well align Chinese

This may not exist. Maybe someone can make a font specifically to align calendar, but I don't know how to make fonts.

[LukashonakV]

Hi @lilydjwg if it's not an issue more please close current. I'll update wiki soon then. Thanks)

[BRS5672023]

It seems this issue happens again since version 0.10.0-1, but slightly different from the original issue here. My config of the clock module is almost the same with which given by @LukashonakV

"clock": {
    "format": "{:%H:%M}",
        "format-alt": "{:%Y-%m-%d}",
    // "tooltip-format": "{:L%Y 年 %B %d 日, %A}",
        "tooltip-format": "<span size='9pt' font='WenQuanYi Zen Hei Mono'>{calendar}</span>",
        "calendar": {
        "mode": "year",
        "mode-mon-col": 3,
        "weeks-pos": "right",
        "on-scroll": 1,
        "on-click-right": "mode",
        "format": {
            "months": "<span color='#ffead3'><b>{}</b></span>",
            "days": "<span color='#ecc6d9'><b>{}</b></span>",
            "weeks": "<span color='#99ffdd'><b>W{}</b></span>",
            "weekdays": "<span color='#ffcc66'><b>{}</b></span>",
            "today": "<span color='#ff6699'><b><u>{}</u></b></span>"
            }
        },
        "actions":  {
        "on-click-right": "mode",
        "on-click-forward": "tz_up",
        "on-click-backward": "tz_down",
        "on-scroll-up": "shift_up",
        "on-scroll-down": "shift_down"
    }
},

Notice that the first column is aligned correctly (an extra character "日" appears here comes from the third column), but the second column seems to have an indentation of 2 characters, and the third with 4 characters indentation. After switching to the single-month mode (with a right click), the text part seems to align correctly but the empty vertical space on the right having the same width with the multi-month mode...

[ktech0]

same issues, and not localized weeks.