Skip to content
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.

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

LibWeb/Layout: Add support for overflow-wrap property #3965

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

mehrankamal
Copy link
Contributor

Spec: https://www.w3.org/TR/css-text-3/#overflow-wrap-property

This PR adds support for overflow-wrap and it's legacy word-wrap property

Comment on lines 562 to 592
// FIXME:
{
auto glyph_run = Gfx::shape_text({ x, 0 }, letter_spacing.to_float(), chunk.view, chunk.font, text_type, shape_features);
dbgln("Shaping current chunk: {}", chunk.view);

CSSPixels chunk_width = CSSPixels::nearest_value_for(glyph_run->width());
if (text_node.computed_values().overflow_wrap() == CSS::OverflowWrap::BreakWord) {
// while glyph_run.width > context->available_space()
// reshape text with lesser chars
// reset the text_node iterator back to characters removed from initial text_shape
auto maybe_available_space = m_inline_formatting_context.available_space();
if (maybe_available_space.has_value()) {
auto available_space = maybe_available_space.value();
auto removed_code_points_count = 0;
auto new_chunk_view = chunk.view;
dbgln("Chunk Width: {}, Available Width: {}", chunk_width.to_int(), available_space.width.to_px_or_zero().to_int());

// FIXME: Use binary search to find the number of characters to rewind to
while (chunk_width + CSSPixels::from_raw(removed_code_points_count) > available_space.width.to_px_or_zero()) {
new_chunk_view = new_chunk_view.unicode_substring_view(0, new_chunk_view.length() - 1);
glyph_run = Gfx::shape_text({ x, 0 }, letter_spacing.to_float(), new_chunk_view, chunk.font, text_type, shape_features);
dbgln("Shaped current chunk: {}", new_chunk_view);
chunk_width = CSSPixels::nearest_value_for(glyph_run->width());
removed_code_points_count++;
}

// FIXME: Rewind the chunk_iterator back removed_code_points_count times.

dbgln("Removed {} codepoints when Breaking Words", removed_code_points_count);
}
}
}
Copy link
Contributor Author

@mehrankamal mehrankamal Mar 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably a better implementation is possible

name="assert"
content="The 'overflow-wrap' property set 'break-word' breaks the word at an arbitrary point"
/>
<link rel="stylesheet" type="text/css" href="../../..../../../fonts/ahem.css" />

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here there should be a typo, "/..../", too many dots I guess

Copy link

Your pull request has conflicts that need to be resolved before it can be reviewed and merged. Make sure to rebase your branch on top of the latest master.

@github-actions github-actions bot added the conflicts Pull request has merge conflicts that need resolution label Mar 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
conflicts Pull request has merge conflicts that need resolution
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants