Quotation marks replaced with odd character

Celeo commented 6 months ago

Issue Checklist

[X] I am using NexT version 8.0 or later.
[X] I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
[X] I have already searched for current issues, which does not help me.

Expected behavior

Single ' and double " quotes should render without extra spacing in Firefox.

Actual behavior

In Firefox, putting some text with quotes into a post yields this:

This behavior looks to be the same with npx hexo serve and on the generated site hosted on GitHub Pages.

I would say that this is an issue with my browser, but everything seems to be correct in the NexT docs:

Steps to reproduce the behavior

This is reproducible with a new blog with the theme installed:

npx hexo init blog
cd blog
npm i hexo-theme-next
Change the theme in _config.yml
Put some text with single and/or double quotes into the hello-world post
npx hexo s

Node.js and NPM Information

v20.5.1
9.8.0

Package dependencies Information

hexo-site@0.0.0 /home/matt/downloads/blog
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-tag@2.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.1.1
├── hexo-renderer-stylus@3.0.0
├── hexo-server@3.0.0
├── hexo-theme-landscape@1.0.0
└── hexo@7.0.0

Hexo Configuration

It's the OOTB Hexo config with just the "theme" value set to "next".

NexT Configuration

n/a

Other Information

No response

welcome[bot] commented 6 months ago

Thanks for opening this issue, maintainers will get back to you as soon as possible!

stevenjoezhang commented 6 months ago

Hello, the issue seems to be the same as https://github.com/theme-next/hexo-theme-next/issues/462#issuecomment-435429592 and here's the English translation of the original post in Chinese:

English quotation marks are rendered as Chinese quotation marks.

Firstly, identify which "quotation mark" you are inputting, ' (U+0027) or ’ (U+2019).

I. `'` (`U+0027`)

(I) HOW

If you are inputting ' (U+0027), try:

## Applicable to hexo-renderer-markdown-it and hexo-renderer-markdown-it-plus
markdown:
  render:
-    typographer: true
+    typographer: false

Or:

## Applicable to the default hexo-renderer-marked
marked:
-  smartypants: true
+  smartypants: false

(II) WHY

According to the Wiki of hexo-renderer-markdown-it:

typographer: false # No substitution, so dumb quotes will remain dumb quotes, etc.

If set to true, it will replace dumb quotes (' - U+0027 and " - U+0022). The replacement should be:

' - U+0027 ---> ’ - U+2019
" - U+0022 ---> “ - U+201C + ” - U+201D

Look at the second one. Notice that after replacement, it becomes "Chinese" double quotes, and Chinese characters are (not sure) full-width characters, causing the issue you see:

English content is hard to read.

However, your example is the first one, becoming "Chinese" right single quotation mark.

II. `’` (`U+2019`)

If you input ’ (U+2019), then:

Try replacing it with ' (U+0027).
Modify the CSS font-family, adding an English font before the Chinese font.

(I) Point 1

Replace with ' (U+0027) standard? Before answering this, let's consider aesthetics. You can refer to any article on Medium, e.g., It’s Time for Tech Workers to Get Political, which uses ’ - U+2019 and “” - U+201C + U+201D, providing a better display. So why not use it? Because to accommodate Chinese typesetting, you must use ' (U+0027). Therefore, using ' (U+0027) as a replacement should be fine (to be confirmed).

(II) Point 2

Considering NexT defaults to adding the Lato font:

base.styl

_config.yml

Therefore, no need to change the CSS. However, since not every device may have Lato installed locally, you need to enable an external font library to ensure Lato is loaded.

font:
-  enable: false
+  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  # Considering the domestic network
-  host:
+  host: https://fonts.loli.net

Of course, this approach will inevitably have a bug: Chinese content may be hard to read. The originally full-width double and single quotes become half-width, resulting in poor aesthetics.

III. Comments

Why does the unavoidable bug mentioned above exist? Because the familiar double and single quotes are directly from English (to be confirmed), so their Unicode is the same. Considering the different typesetting standards for Chinese and English (full-width and half-width), conflicts arise when mixing Chinese and English, such as the English apostrophe ’ (U+2019) and the "Chinese" right single quote.

Regarding Chinese typesetting quotes, one solution is to use angle quotes, i.e., "「」" and "『』". This is the current standard in Taiwan, Hong Kong, and Japan. The display effect varies from person to person.

IV. My Choice

~Apostrophes, I directly use ' (U+0027) because this symbol is convenient and simple to input on Linux.~

~Quotation marks:~

~- For Chinese, double quotes are “” (U+201C + U+201D), and single quotes are ‘’ (U+2018 + U+2019).~ ~- For English, double quotes are directly " " (U+0022), and single quotes are directly ' (U+0027).~

V. References & Resources

VI. Update (`2019-01-05`)

@gapplef Sorry, my choice has changed.

Considering many English media no longer use straight quotes but follow typographic standards with curly quotes:

For English content, seeing straight quotes again feels unattractive.
For Chinese content, seeing curly quotes feels awkward and unsuitable for Chinese; straight quotes like angle quotes "「」" should be used.

Therefore, my current choice is:

Apostrophes: ’ (U+2019)

Quotation marks:

For Chinese, use "「」" and "『』" if further quoting is needed.
For English, use “” and ‘’.

In other words, returning the borrowed curly quotes to English, and for Chinese, adopting the square angle quotes that better match the square characteristics of Chinese characters.

To successfully return to English on a blog, you need to modify the CSS font-family, adding an English font before the Chinese font.

This way, English font typesetting can be perfect, but there are three issues with Chinese font typesetting:

Interpunct (spacing issue)
Ellipsis (position issue)
Em dash (break issue)

Because these three symbols also come directly from English, and Chinese does not have corresponding independent Unicode, and CSS sets English font priority over Chinese font, the glyph is English, not Chinese.

Celeo commented 6 months ago

Thank you for the translation!!

Celeo commented 6 months ago

That fixed it. Thanks!

next-theme / hexo-theme-next