Add top/bottom vertical alignment for inline boxes

examples/common/src/lib.rs

@@ -14,7 +14,7 @@ use std::time::Instant;
 use parley::fontique::Blob;
 use parley::{
     Alignment, AlignmentOptions, FontContext, FontFamily, FontWeight, GenericFamily, InlineBox,
-    InlineBoxKind, Layout, LayoutContext, LineHeight, StyleProperty,
+    InlineBoxKind, InlineBoxVerticalAlign, Layout, LayoutContext, LineHeight, StyleProperty,
 };
 use peniko::Color;
 
@@ -207,6 +207,7 @@ pub fn build_rich_layout(
         width: 50.0,
         height: 50.0,
         baseline: None,
+        vertical_align: InlineBoxVerticalAlign::default(),
     });
 
     let mut layout = builder.build(&config.text);

examples/swash_render/src/main.rs

@@ -10,7 +10,10 @@ use image::codecs::png::PngEncoder;
 use image::{self, Pixel, Rgba, RgbaImage};
 use parley::layout::{Alignment, Glyph, GlyphRun, Layout, PositionedLayoutItem};
 use parley::style::{FontFamily, FontWeight, StyleProperty, TextStyle};
-use parley::{AlignmentOptions, FontContext, InlineBox, InlineBoxKind, LayoutContext, LineHeight};
+use parley::{
+    AlignmentOptions, FontContext, InlineBox, InlineBoxKind, InlineBoxVerticalAlign, LayoutContext,
+    LineHeight,
+};
 use std::fs::File;
 use swash::FontRef;
 use swash::scale::image::Content;
@@ -99,6 +102,7 @@ fn main() {
             width: 50.0,
             height: 50.0,
             baseline: None,
+            vertical_align: InlineBoxVerticalAlign::default(),
         });
 
         builder.push_text(&text[40..50]);
@@ -110,6 +114,7 @@ fn main() {
             width: 50.0,
             height: 30.0,
             baseline: None,
+            vertical_align: InlineBoxVerticalAlign::default(),
         });
 
         builder.push_text(&text[50..141]);
@@ -161,6 +166,7 @@ fn main() {
             width: 50.0,
             height: 50.0,
             baseline: None,
+            vertical_align: InlineBoxVerticalAlign::default(),
         });
         builder.push_inline_box(InlineBox {
             id: 1,
@@ -169,6 +175,7 @@ fn main() {
             width: 50.0,
             height: 30.0,
             baseline: None,
+            vertical_align: InlineBoxVerticalAlign::default(),
         });
 
         // Build the builder into a Layout

examples/tiny_skia_render/src/main.rs

@@ -11,7 +11,8 @@
 
 use parley::{
     Alignment, AlignmentOptions, FontContext, FontWeight, GenericFamily, GlyphRun, InlineBox,
-    InlineBoxKind, Layout, LayoutContext, LineHeight, PositionedLayoutItem, StyleProperty,
+    InlineBoxKind, InlineBoxVerticalAlign, Layout, LayoutContext, LineHeight, PositionedLayoutItem,
+    StyleProperty,
 };
 use skrifa::{
     GlyphId, MetadataProvider, OutlineGlyph,
@@ -93,6 +94,7 @@ fn main() {
         width: 50.0,
         height: 50.0,
         baseline: None,
+        vertical_align: InlineBoxVerticalAlign::default(),
     });
 
     // Build the builder into a Layout

parley/src/inline_box.rs

@@ -20,6 +20,26 @@ pub struct InlineBox {
     ///
     /// If `None`, the baseline is the box's bottom edge.
     pub baseline: Option<f32>,
+    /// How the box is aligned within its line box.
+    pub vertical_align: InlineBoxVerticalAlign,
+}
+
+/// How an [`InlineBox`] is aligned within its line box.
+#[derive(PartialEq, Eq, Debug, Clone, Copy, Default)]
+pub enum InlineBoxVerticalAlign {
+    /// The box's baseline is aligned with the line's baseline.
+    ///
+    /// This corresponds to `vertical-align: baseline` in CSS.
+    #[default]
+    Baseline,
+    /// The top of the box is aligned with the top of the line box.
+    ///
+    /// This corresponds to `vertical-align: top` in CSS.
+    Top,
+    /// The bottom of the box is aligned with the bottom of the line box.
+    ///
+    /// This corresponds to `vertical-align: bottom` in CSS.
+    Bottom,
 }
 
 /// Whether a box is in-flow (takes up space in the layout) or out-of-flow (e.g. absolutely positioned)

parley/src/layout/line.rs

@@ -7,7 +7,7 @@ use crate::layout::data::{LayoutItemKind, LineData};
 use crate::layout::layout::Layout;
 use crate::layout::run::Run;
 use crate::style::Brush;
-use crate::{InlineBox, InlineBoxKind};
+use crate::{InlineBox, InlineBoxKind, InlineBoxVerticalAlign};
 
 use core::ops::Range;
 use parley_engine::Glyph;
@@ -321,10 +321,19 @@ impl<'a, B: Brush> Iterator for GlyphRunIter<'a, B> {
                     if inline_box.kind == InlineBoxKind::InFlow {
                         self.offset += inline_box.width;
                     }
+                    let y = match inline_box.vertical_align {
+                        InlineBoxVerticalAlign::Baseline => {
+                            self.line.data.metrics.baseline
+                                - inline_box.baseline.unwrap_or(inline_box.height)
+                        }
+                        InlineBoxVerticalAlign::Top => self.line.data.metrics.block_min_coord,
+                        InlineBoxVerticalAlign::Bottom => {
+                            self.line.data.metrics.block_max_coord - inline_box.height
+                        }
+                    };
                     return Some(PositionedLayoutItem::InlineBox(PositionedInlineBox {
                         x,
-                        y: self.line.data.metrics.baseline
-                            - inline_box.baseline.unwrap_or(inline_box.height),
+                        y,
                         width: inline_box.width,
                         height: inline_box.height,
                         baseline: inline_box.baseline,