Skip to content

[css-text-3] Add Japanese example for keep-all #3152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 3, 2018
Merged

[css-text-3] Add Japanese example for keep-all #3152

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2821a54
[css-text-3] Add Japanese example for keep-all
frivoal Sep 26, 2018
dc5e15a
[css-text-3] Add sample rendering to example
frivoal Oct 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions css-text-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1024,6 +1024,61 @@ Line Breaking Details</h3>
</dl>
</div>

<div class="example" id=jp-title-break>
<style>
#jp-title-break td samp,
#jp-title-break td pre {
font-size: 1.5em;
width: 9em;
line-height: 2;
padding: 0.5em 1em;
display: block;
margin: auto;
border: solid gray 1px;
background: white;
}
</style>
<p>Japanese is usually laid out to allow line breaks within words.
However, it is sometimes preferred to suppress these wrapping opportunities and to only allow wrapping at the end of certain sentence fragments.
This is most commonly done in very short pieces of text, such as headings, table or figure captions.

This can be achieved by marking the allowed wrapping points with <{wbr}> or U+200B ZERO WIDTH SPACE,
and suppressing the other ones using ''word-break: keep-all''.

For instance, the following markup can produce either of the renderings below,
depending on the value of the 'word-break' property:
<pre><code highlight=markup>
&lt;h1>窓ぎわの&lt;wbr>トットちゃん&lt;/h1>
</code></pre>

<table class=data>
<tr>
<td>
<th><code highlight=css>h1 { word-break: normal }</code>
<th><code highlight=css>h1 { word-break: keep-all }</code>
<tr>
<th>Expected rendering
<td>
<pre lang=ja>
窓ぎわのトットちゃ
ん</pre>
<td>
<pre lang=ja>
窓ぎわの
トットちゃん</pre>
<tr>
<th>Result in your browser
<td>
<samp lang=ja>
窓ぎわの<wbr>トットちゃん
</samp>
<td>
<samp style="word-break:keep-all" lang=ja>
窓ぎわの<wbr>トットちゃん
</samp>
</table>
</div>

<p>When shaping scripts such as Arabic
are allowed to break within words due to ''word-break/break-all''
the characters must still be shaped
Expand Down