calendar day-of-week header is misaligned in Chinese #1321

lilydjwg · 2021-11-19T15:03:51Z

Just see the screenshot:

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

LukashonakV · 2022-03-26T10:27:12Z

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 · 2022-03-26T12:01:46Z

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 · 2022-03-26T20:43:33Z

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

lilydjwg · 2022-03-27T12:44:00Z

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 · 2023-01-24T12:25:02Z

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

lilydjwg · 2023-01-24T13:20:17Z

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 · 2023-01-24T13:22:54Z

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

lilydjwg · 2023-01-24T13:45:36Z

LANG=zh_CN.UTF8
LANGUAGE=zh_CN:zh_TW

LukashonakV · 2023-01-24T14:05:33Z

LANG=zh_CN.UTF8
LANGUAGE=zh_CN:zh_TW

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

LukashonakV · 2023-01-28T05:44:38Z

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 · 2023-01-28T06:21:49Z

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 · 2023-01-28T06:30:53Z

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 · 2023-01-28T06:48:26Z

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 · 2023-01-28T07:17:31Z

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

lilydjwg · 2023-01-28T09:49:09Z

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 · 2023-01-28T13:41:20Z

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 · 2023-02-01T22:48:14Z

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

I've installed WenQuanYi Zen Hei
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>"
                              }
                    }
    },

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

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

Examples with mono:

lilydjwg · 2023-02-02T03:42:55Z

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 · 2023-02-02T07:38:11Z

@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 · 2023-02-03T10:11:41Z

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 · 2023-02-03T10:22:35Z

HI @lilydjwg
can you check please ISSUE1874. Is it possible you have changed local.conf fontconfig? Please check exact #1874 (comment)
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 · 2023-02-03T12:53:08Z

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 · 2023-02-03T15:31:52Z

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 · 2023-02-04T09:37:14Z

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

config
style.css
styleCfg.css

LukashonakV · 2023-02-04T10:49:11Z

@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 · 2023-02-04T10:52:14Z

So finally:

Font should be used: WenQuanYi Zen Hei Mono
Font size for Calendar shoud be divisible by 3 without a reminder.
If it doesn't help, please try to use my waybar dot
Upd:
The MAIN criteria is font size.
. 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 · 2023-02-05T05:39:31Z

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 · 2023-02-05T05:51:13Z

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

BRS5672023 · 2024-03-29T18:44:51Z

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 · 2024-03-31T14:38:35Z

same issues, and not localized weeks.

LukashonakV mentioned this issue Mar 26, 2022

#1315. Add option to display week number on calendar #1492

Merged

LukashonakV mentioned this issue Jan 27, 2023

Clock. Formating simplify #1982

Merged

LukashonakV mentioned this issue Feb 2, 2023

Clock. Calendar. Avoid of unnecessary string transformation #1998

Merged

lilydjwg closed this as completed Feb 5, 2023

ordy mentioned this issue Apr 13, 2024

Calendar display issue with the clock module #3132

Open

Fr4nk1inCs mentioned this issue Jun 20, 2024

Pango Markup Not Correctly Rendered in Tooltip #3375

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

calendar day-of-week header is misaligned in Chinese #1321

calendar day-of-week header is misaligned in Chinese #1321

lilydjwg commented Nov 19, 2021

LukashonakV commented Mar 26, 2022

lilydjwg commented Mar 26, 2022

LukashonakV commented Mar 26, 2022

lilydjwg commented Mar 27, 2022

LukashonakV commented Jan 24, 2023

lilydjwg commented Jan 24, 2023

LukashonakV commented Jan 24, 2023

lilydjwg commented Jan 24, 2023

LukashonakV commented Jan 24, 2023

LukashonakV commented Jan 28, 2023 •

edited

Loading

lilydjwg commented Jan 28, 2023

LukashonakV commented Jan 28, 2023 •

edited

Loading

lilydjwg commented Jan 28, 2023 •

edited

Loading

LukashonakV commented Jan 28, 2023

lilydjwg commented Jan 28, 2023

LukashonakV commented Jan 28, 2023

LukashonakV commented Feb 1, 2023 •

edited

Loading

lilydjwg commented Feb 2, 2023

LukashonakV commented Feb 2, 2023 •

edited

Loading

lilydjwg commented Feb 3, 2023

LukashonakV commented Feb 3, 2023 •

edited

Loading

lilydjwg commented Feb 3, 2023

LukashonakV commented Feb 3, 2023 •

edited

Loading

LukashonakV commented Feb 4, 2023 •

edited

Loading

LukashonakV commented Feb 4, 2023

LukashonakV commented Feb 4, 2023 •

edited

Loading

lilydjwg commented Feb 5, 2023

LukashonakV commented Feb 5, 2023

BRS5672023 commented Mar 29, 2024 •

edited

Loading

ktech0 commented Mar 31, 2024

calendar day-of-week header is misaligned in Chinese #1321

calendar day-of-week header is misaligned in Chinese #1321

Comments

lilydjwg commented Nov 19, 2021

LukashonakV commented Mar 26, 2022

lilydjwg commented Mar 26, 2022

LukashonakV commented Mar 26, 2022

lilydjwg commented Mar 27, 2022

LukashonakV commented Jan 24, 2023

lilydjwg commented Jan 24, 2023

LukashonakV commented Jan 24, 2023

lilydjwg commented Jan 24, 2023

LukashonakV commented Jan 24, 2023

LukashonakV commented Jan 28, 2023 • edited Loading

lilydjwg commented Jan 28, 2023

LukashonakV commented Jan 28, 2023 • edited Loading

lilydjwg commented Jan 28, 2023 • edited Loading

LukashonakV commented Jan 28, 2023

lilydjwg commented Jan 28, 2023

LukashonakV commented Jan 28, 2023

LukashonakV commented Feb 1, 2023 • edited Loading

lilydjwg commented Feb 2, 2023

LukashonakV commented Feb 2, 2023 • edited Loading

lilydjwg commented Feb 3, 2023

LukashonakV commented Feb 3, 2023 • edited Loading

lilydjwg commented Feb 3, 2023

LukashonakV commented Feb 3, 2023 • edited Loading

LukashonakV commented Feb 4, 2023 • edited Loading

LukashonakV commented Feb 4, 2023

LukashonakV commented Feb 4, 2023 • edited Loading

lilydjwg commented Feb 5, 2023

LukashonakV commented Feb 5, 2023

BRS5672023 commented Mar 29, 2024 • edited Loading

ktech0 commented Mar 31, 2024

LukashonakV commented Jan 28, 2023 •

edited

Loading

LukashonakV commented Jan 28, 2023 •

edited

Loading

lilydjwg commented Jan 28, 2023 •

edited

Loading

LukashonakV commented Feb 1, 2023 •

edited

Loading

LukashonakV commented Feb 2, 2023 •

edited

Loading

LukashonakV commented Feb 3, 2023 •

edited

Loading

LukashonakV commented Feb 3, 2023 •

edited

Loading

LukashonakV commented Feb 4, 2023 •

edited

Loading

LukashonakV commented Feb 4, 2023 •

edited

Loading

BRS5672023 commented Mar 29, 2024 •

edited

Loading