Problem with rendering in Tokiwa Hugo theme (apostrophes and numbering)

[Chirag_rb]

I’m having an issue with apostrophes on my Hugo site using the Tokiwa theme. They’re being rendered incorrectly, appearing as:

it’s looks like it’ s

This problem is consistent throughout my entire site. Does anyone know how to fix this?

Theme: GitHub - heyeshuang/hugo-theme-tokiwa: a hugo theme

I’ve checked my content files, and the apostrophes are correctly typed there. It seems like the issue is occurring during the rendering process. Has anyone else encountered this problem with the Tokiwa theme or Hugo in general?
Another thing - numbers are being rendered as α, β, γ, δ, and so on. How can I change it back to regular numbers?

Any help or suggestions would be greatly appreciated. Thanks in advance!

[irkode]

@Chirag_rb

They’re being rendered incorrectly, appearing as:

it’s looks like it’ s

All three apostrophes in the quote rendeer the same for me. So I did not get the exact problem. Maybe the blank after the second one? Please add details.

My observation is thet even the display is eual there’s a difference when viewed on my mobile or desktop browser (both chrome)

If guessing I would think of a font problem and suggest:

• check your font settings for the theme and any custom
• try with a standard font

[Chirag_rb]

Thanks for reply.

Yes, I also noticed difference in mobile webpage and desktop. On mobile it’s correct on chrome. On desktop it’s not.
Please take a look at this on desktop for an example. It looks correct on mobile chrome.
On firefox it looks incorrect on both platforms.
https://bharam.be/posts/cloudflare-ddns/
Tried both firefox and chrome on Android & Linux.
Quotes also have the same problem.
When I select with cursor it looks like these characters taking too much space.

[irkode]

@irkode

• check your font settings for the theme and any custom
• try with a standard font

What about these:

[chrillek]

As to the greek characters: Your HTML does exactly what your CSS tells it to do:

.c-rich-text ol {
  list-style-type: lower-greek;
  list-style-position: inside;
}

That’s not a Hugo issue, it’s about the theme’s or your custom CSS settings.

[chrillek]

You might want to rethink your decision for the theme: The app.css used by it is ridiculously large, with nearly 50.000 rules (according to Firefox) and Lighthouse notices about 380 KB of it are unused. Whoever wrote that is way off the mark (not only because they set the ol marker to greek letters).

[chrillek]

@irkode

Maybe the blank after the second one?

I guess that’s introduced by the pangu lib the theme uses (probably because the OP didn’t set the language of their site correctly). It introduces space(s) between Chinese and western characters to make the text look “nicer”:

GitHub - vinta/pangu.js: Paranoid text spacing in JavaScript

IMO, this theme is a bad starting point for someone posting in a Western language. It is geared towards Chinese, and many of its settings must be adjusted for other writing systems. Not to mention that it was last updated three years ago – not what I would consieder “actively developed”.

[Chirag_rb]

There are too many fonts and overrides everywhere in this theme. I change some stuff but see no change in rendered website.

[Chirag_rb]

Changed this. Deleted public. rebuilt site. no change

[Chirag_rb]

Thank you for sharing your observations. I also noticed some of the things you mentioned, like how app.css is taking most of the loading time.
There are also multiple redundencies throughout this theme. Too many fonts, css, js and whatnot.
I made language en everywhere and removed pangu.js but still saw no change.
I’ll experiment with another theme in testing. Really liked how this theme looked . Maybe you have a suggestion for me, I would appreciate it. This is my first time using hugo or go so it took some time to notice things.

[irkode]

Problem with rendering in Tokiwa Hugo theme (apostrophes and numbering)

I guess that’s introduced by the pangu lib the theme uses (probably because the OP didn’t set the language of their site correctly). It introduces space(s) between Chinese and western characters to make the text look “nicer”: IMO, this theme is a bad starting point for someone posting in a Western language. It is geared towards Chinese, and many of its settings must be adjusted for other writing systems. Not to mention that it was last updated three years ago – not what I would consieder “ac…

also JS is involved - drop that JS library and you may get luckky.

If you are not in deep diving in the code. maybe you can wait for a response to your issue: I’m having an issue with rendering on my Hugo site using the Tokiwa theme. · Issue #45 · heyeshuang/hugo-theme-tokiwa · GitHub

[chrillek]

Personally, I’d just write my own CSS and theme. Then you know what’s happening and you learn a lot about Hugo et al on the way.

If you don’t want to do that, choose a small theme (i.e. something not relying on Tailwind or Bootstrap or one of the other CSS frameworks) that is well-maintained (ie recently updated).