Implement text-wrap-mode

Author: nicoburns

Cargo.lock

@@ -52,7 +52,7 @@ taffy = { version = "0.8", default-features = false, features = ["std", "flexbox
 color = "0.3"
 peniko = "0.4"
 kurbo = "0.11"
-parley = { version = "0.4", default-features = false, features = ["std"] }
+parley = { path = "../parley/parley", version = "0.4", default-features = false, features = ["std"] }
 wgpu = "24"
 softbuffer = "0.4"
 vello = { version = "0.5", features = [ "wgpu" ] }

Cargo.toml

@@ -44,6 +44,16 @@ fn push_children_and_pseudos(layout_children: &mut Vec<usize>, node: &Node) {
     }
 }
 
+/// Convert a relative line height to an absolute one
+fn resolve_line_height(line_height: parley::LineHeight, font_size: f32) -> f32 {
+    let size = match line_height {
+        parley::LineHeight::FontSizeRelative(relative) => relative * font_size,
+        parley::LineHeight::Absolute(absolute) => absolute,
+        parley::LineHeight::MetricsRelative(_) => unreachable!(),
+    };
+    size
+}
+
 pub(crate) fn collect_layout_children(
     doc: &mut BaseDocument,
     container_node_id: usize,
@@ -446,7 +456,7 @@ fn node_list_item_child(
             };
 
             let mut layout = builder.build().0;
-            let width = layout.max_content_width();
+            let width = layout.calculate_content_widths().max;
             layout.break_all_lines(Some(width));
 
             ListItemLayoutPosition::Outside(Box::new(layout))
@@ -731,7 +741,7 @@ pub(crate) fn build_inline_layout(
 
     // dbg!(&parley_style);
 
-    let root_line_height = parley_style.line_height;
+    let root_line_height = resolve_line_height(parley_style.line_height, parley_style.font_size);
 
     // Create a parley tree builder
     let mut builder =
@@ -898,9 +908,14 @@ pub(crate) fn build_inline_layout(
 
                             // style.brush = peniko::Brush::Solid(peniko::Color::WHITE);
 
+                            let font_size = style.font_size;
+
                             // Floor the line-height of the span by the line-height of the inline context
                             // See https://www.w3.org/TR/CSS21/visudet.html#line-height
-                            style.line_height = style.line_height.max(root_line_height);
+                            style.line_height = parley::LineHeight::Absolute(
+                                resolve_line_height(style.line_height, font_size)
+                                    .max(root_line_height),
+                            );
 
                             // dbg!(node_id);
                             // dbg!(&style);

packages/blitz-dom/src/layout/construct.rs

@@ -74,7 +74,8 @@ impl BaseDocument {
                     .width
                     .map(|w| (w * scale) - pbw)
                     .unwrap_or_else(|| {
-                        let content_sizes = inline_layout.layout.content_widths();
+                        // TODO: cache content widths
+                        let content_sizes = inline_layout.layout.calculate_content_widths();
                         let computed_width = match available_space.width {
                             AvailableSpace::MinContent => content_sizes.min,
                             AvailableSpace::MaxContent => content_sizes.max,

packages/blitz-dom/src/layout/inline.rs

@@ -8,6 +8,7 @@ use crate::util::ToColorColor;
 
 // Module of type aliases so we can refer to stylo types with nicer names
 pub(crate) mod stylo {
+    pub(crate) use style::computed_values::text_wrap_mode::T as TextWrapMode;
     pub(crate) use style::computed_values::white_space_collapse::T as WhiteSpaceCollapse;
     pub(crate) use style::properties::ComputedValues;
     pub(crate) use style::values::computed::OverflowWrap;
@@ -43,13 +44,11 @@ pub(crate) fn style(
 
     // Convert font size and line height
     let font_size = font_styles.font_size.used_size.0.px();
-    let line_height: f32 = match font_styles.line_height {
-        stylo::LineHeight::Normal => font_size * 1.2,
-        stylo::LineHeight::Number(num) => font_size * num.0,
-        stylo::LineHeight::Length(value) => value.0.px(),
+    let line_height = match font_styles.line_height {
+        stylo::LineHeight::Normal => parley::LineHeight::FontSizeRelative(1.2),
+        stylo::LineHeight::Number(num) => parley::LineHeight::FontSizeRelative(num.0),
+        stylo::LineHeight::Length(value) => parley::LineHeight::Absolute(value.0.px()),
     };
-    // Parley expects line height as a multiple of font size!
-    let line_height = line_height / font_size;
 
     let letter_spacing = itext_styles
         .letter_spacing
@@ -126,6 +125,10 @@ pub(crate) fn style(
         .map(TextBrush::from_color);
 
     // Wrapping and breaking
+    let text_wrap_mode = match itext_styles.text_wrap_mode {
+        stylo::TextWrapMode::Wrap => parley::TextWrapMode::Wrap,
+        stylo::TextWrapMode::Nowrap => parley::TextWrapMode::NoWrap,
+    };
     let word_break = match itext_styles.word_break {
         stylo::WordBreak::Normal => parley::WordBreakStrength::Normal,
         stylo::WordBreak::BreakAll => parley::WordBreakStrength::BreakAll,
@@ -161,5 +164,6 @@ pub(crate) fn style(
         letter_spacing,
         overflow_wrap,
         word_break,
+        text_wrap_mode,
     }
 }