Issue
As I understand it from the documentation, <wbr> and the Unicode zero-width space character, ​ or ​, are functionally equivalent, and are supposed to suggest line-break opportunities, especially for languages such as Japanese that do not use spaces as word boundaries.
Nevertheless, all modern browsers such as Chrome, Firefox and Safari seem to completely ignore them when deciding where to break a line of Japanese text. I know that technically it is not supposed to matter where a line break occurs in Japanese, but our translators have asked whether we could improve where some line-breaks are occurring.
Here is a JSFiddle which demonstrates the problem:
https://jsfiddle.net/520khpzg/
And here is the same as standalone HTML:
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Testing Line Breakks in Japanese</title>
<style>
div {
font-size: 2rem;
width: 12rem;
border: 1px solid;
}
</style>
</head>
<body>
<div>
デバイス<wbr>設定方法
</div>
<div>
デバイス​設定方法
</div>
<div>
aaaaaa<wbr>bbbbbb
</div>
</body>
</html>
I feel like I must be missing something fundamental here, but having read over various docs I’ve no idea what it could be. Why would browsers ignore <wbr> and ​ in Japanese but not in English, particularly when the Unicode documentation for ZWSP suggests that it is precisely for languages like Japanese?
Solution
Utilising ZWSP or <wbr> to fine-tune line break behaviour was the right call, but there was one ingredient missing: The word-break CSS property.
By default, the three Japanese scripts – Kanji, Hiragana, and Katakana – allow line breaks almost everywhere, even within words. Exceptions are small kana (i.e. the ゃ in きゃ), certain punctuation marks, and a handful of symbols like 々, none of which can usually start a line.
To override this behaviour, word-break: keep-all needs to be used. This removes line break opportunities between Japanese (and also Chinese and Korean) characters, so lines will only wrap where some other opportunity like ZWSP is provided.
Answered By - CharlotteBuff
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.