eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-01 12:07:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Implement word-break functionality using UAX#14 line breaking

Browse Source 
We now use ICU's line break iterator to determine soft wrap
opportunities, enabling correct line breaking for CJK text.
This commit is contained in:
Tim Ledbetter
2026-01-20 09:23:51 +00:00
committed by Tim Flynn
parent 6efaf800ac
commit d49a2dcfa1
Notes: github-actions[bot] 2026-02-14 21:24:19 +00:00 
Author: https://github.com/tcl3
Commit: https://github.com/LadybirdBrowser/ladybird/commit/d49a2dcfa1b
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/7556
Reviewed-by: https://github.com/gmta
Reviewed-by: https://github.com/trflynn89 ✅
18 changed files with 470 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
Tests/LibWeb/Ref/input/wpt-import/css/css-text/word-break/word-break-keep-all-000.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>word-break: keep-all, latin</title>
<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'.">
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
<link rel='match' href='../../../../../expected/wpt-import/css/css-text/word-break/reference/word-break-keep-all-ref-000.html'>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<style type='text/css'>
.test { word-break: keep-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div>
<div class="ref"><span>Latin latin latin<br/>latin</span></div>
<script>
var sentenceWidth = document.getElementById('testspan').offsetWidth
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
</script>
</body>
</html>

25
Tests/LibWeb/Ref/input/wpt-import/css/css-text/word-break/word-break-keep-all-001.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>word-break: keep-all, japanese</title>
<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'. In this style, sequences of CJK characters do not break.">
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
<link rel='match' href='../../../../../expected/wpt-import/css/css-text/word-break/reference/word-break-keep-all-ref-001.html'>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<style type='text/css'>
.test { word-break: keep-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語 日本語 日本語</span></div></div>
<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div>
<script>
var sentenceWidth = document.getElementById('testspan').offsetWidth
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
</script>
</body>
</html>

25
Tests/LibWeb/Ref/input/wpt-import/css/css-text/word-break/word-break-keep-all-002.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>word-break: keep-all, korean</title>
<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'. In this style, sequences of CJK characters do not break.">
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
<link rel='match' href='../../../../../expected/wpt-import/css/css-text/word-break/reference/word-break-keep-all-ref-002.html'>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<style type='text/css'>
.test { word-break: keep-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div>
<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div>
<script>
var sentenceWidth = document.getElementById('testspan').offsetWidth
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
</script>
</body>
</html>

25
Tests/LibWeb/Ref/input/wpt-import/css/css-text/word-break/word-break-keep-all-009.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>word-break: keep-all, ID and CJ</title>
<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'. In this style, sequences of CJK characters do not break.">
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
<link rel='match' href='../../../../../expected/wpt-import/css/css-text/word-break/reference/word-break-keep-all-ref-009.html'>
<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'>
<style type='text/css'>
.test { word-break: keep-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
<div class="test" lang="ja"><div id="testdiv"><span id="testspan">フォ フォ</span></div></div>
<div class="ref" lang="ja"><span>フォ<br/>フォ</span></div>
<script>
var sentenceWidth = document.getElementById('testspan').offsetWidth;
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px';
</script>
</body>
</html>