Prevent/workaround browser converting '\n' between lines into space (for Chinese characters)

Question

Converting newline into space makes sense for English, for example, the following HTML:

<p>
This is
a sentence.
</p>

We get the following after converting the newline into space in the browser:

This is a sentence.

This is good for English, but not good for Chinese characters because we don't use spaces to separate words in Chinese. Here's an example (The Chinese sentence has the same meaning of "This is a sentence"):

<p>
这是
一句话。
</p>

I get the following result on Chrome, Safari and IE...

这是 一句话。

...but what I wanted is the following, without the extra space:

这是一句话。

I don't know why the browser does not ignore the newline if the last character of the current line and the first character of the next line are both Chinese characters (which I think makes more sense). Or they have provided this mechanism but need special handling?

BTW, in Vim, when using "J" to join lines, no space will be added if the last and the first character of the 2 lines are all Chinese characters. But for English, a space will be added. So I guess Vim does some special handling for this.

UPDATE:

Though I think this is an issue with the browser, I have to live with that. So currently I would preprocess my Markdown text to join Chinese lines before generating HTML. Here's how I do this in Ruby, complete code which also handles Chinese punctuations is on gist

#encoding: UTF-8

# Requires ruby 1.9.x, and assume using UTF-8 encoding

class String
  # The regular expression trick to match CJK characters comes from
  # http://stackoverflow.com/a/4681577/306935
  def join_chinese
    gsub(/(\p{Han})\n(\p{Han})/m, '\1\2')
  end
end

You could make a script to make new-line-less files from all HTML files in a directory, run that script every time you're about to publish your files to the web, and publish the resulting files. — Gravity, Dec 18 '11 at 07:03
I know this can be easily solved using a script. But I think the browser should handle this to make most people's life easier. As you see, Vim does this, and in LaTeX we can forbid newline converting to spaces. — cyfdecyf, Dec 18 '11 at 07:26

score 12 · Accepted Answer · answered Dec 18 '11 at 10:06

Browsers treat newlines as spaces because the specifications say so, ever since HTML 2.0. In fact, HTML 2.0 was milder than later specifications; it said: “An HTML user agent should treat end of line in any of its variations as a word space in all contexts except preformatted text.” (Conventional Representation of Newlines), whereas newer specifications say this stronger (describing it as what happens in HTML).

The background is that HTML and the Web was developed with mainly Western European languages in mind; this is reflected in many features of the original specifications and early implementations. Only slowly have they been internationalized.

It is unlikely that the parsing rules will be changed. More likely, what might happen is sensitivity to language or character properties rendering. This would mean that a line break still gets taken as a space (and the DOM string will contain Ascii space character), but a string like 这是一句话。 would be rendered as if the space were not there. This what the HTML 4.01 specification seems to refer to (White space). The text is somewhat confused, but I think it tries to say that the behavior would depend in the content language, either inferred by the browser or as declared in markup.

But browsers don’t do such things yet. Declaring the language of content, e.g. <html lang=zh>, is a good principle but has little practical impact—in rendering, it may affect the browser’s choice of a default font (but how many authors let browsers use their default fonts?). It may even result in added spacing, if the space character happens to be wider in the browser’s default font for the language specified.

According to the CSS3 Text draft, you could use the text-spacing property. The value none “Turns off all text-spacing features. All fullwidth characters are set with full-width glyphs.” Unfortunately, no browser seems to support this yet.

score 5 · Answer 2 · answered Apr 04 '12 at 14:37

5

There is a way to solve this problem (classic workaround). In order to restrict (current) browsers of interpreting the line-break as a whitespace you have to set the font-size to 0.

For the child elements you have to set the font-size to its initial value again. So for your code an example would be:

<p class="nowhitespace">
  <span>这是</span>
  <span>一句话。</span>
</p>

The CSS could contain code like the following:

.nowhitespace { font-size: 0; }
.nowhitespace > span { font-size: 16px; }

answered Apr 04 '12 at 14:37

Florian Rappl

3,041
19
25

1

Thanks, this really works. But one problem with this trick is that I have to wrap every line containing Chinese text with `span`. To make things more complicated, if the beginning/ending of a line is English word, then I should not close/open the `span` tag. – cyfdecyf Apr 05 '12 at 07:00
Yes I know - so overall you still have to include a function to modify the lines like the one you wrote above. I came up with this workaround for design purposes, where spaces killed the layout. – Florian Rappl Apr 05 '12 at 07:29

score 3 · Answer 3 · edited May 23 '17 at 12:00

3

So far the shortest way I know to achieve the effect is to break after an opening tag. But you don't want to insert extra tag in your source. It would be nice if there were some tags that does nothing. Actually, there exits one, the comment.

<p>
这是<!--
-->一句话。
</p>

This gives you the following.

这是一句话。

Source of Inspiration: No extra space

edited May 23 '17 at 12:00

Community

1
1

answered Jan 02 '17 at 19:20

Lei Zhao

986
10
11

score -3 · Answer 4 · answered Dec 18 '11 at 06:15

-3

You can use <pre> tags for preformatted text and you can change it's style as well. Preformatted text will take newline characters literally and render it as a new line.

If you don't want <pre>:

Newline character is also considered a whitespace. When you insert a newline character, it will consider the following line a part of the previous line and simply substitute that newline character with a space.

You must explicitly declare a newline in HTML, just use <br>.

answered Dec 18 '11 at 06:15

My problem is that newline should not be considered as white space when handling Chinese characters. But the browser does not take special handling for Chinese characters. – cyfdecyf Dec 18 '11 at 06:20
Well, it doesn't. AFAIK, there is no HTML tag or CSS element to fix this and I doubt such a feature exists in current browsers. :( – Dec 18 '11 at 06:22

Prevent/workaround browser converting '\n' between lines into space (for Chinese characters)

4 Answers4

Linked