silk_layout 0.1.0 → 0.2.0

data/lib/silk_layout/layout/block_layout.rb

@@ -4,6 +4,9 @@ module SilkLayout
   module Layout
     class BlockLayout
       def self.layout(box, context, cursor_y = 0, parent_x = 0, containing_width = nil)
+        available_width = containing_width || context.width
+        resolve_spacing(box, available_width)
+
         return FlexLayout.layout(box, context, cursor_y, parent_x, containing_width) if box.is_a?(FlexBox)
 
         box.x = parent_x + box.margin[:left]
@@ -15,17 +18,7 @@ module SilkLayout
         content_y =
           box.y + box.border[:top] + box.padding[:top]
 
-        available_width = containing_width || context.width
-        if box.explicit_width
-          content_width = box.width
-        else
-          content_width =
-            available_width -
-            box.margin[:left] - box.margin[:right] -
-            box.border[:left] - box.border[:right] -
-            box.padding[:left] - box.padding[:right]
-          content_width = 0 if content_width < 0
-        end
+        content_width = resolved_content_width(box, available_width)
 
         current_y = content_y
         new_children = []
@@ -71,7 +64,9 @@ module SilkLayout
         box.children = new_children
 
         content_height = current_y - content_y
-        content_height = [content_height, box.height].max if box.explicit_height
+        if box.explicit_height
+          content_height = [content_height, content_height_from_css_height(box, declared_height(box))].max
+        end
 
         max_child_width =
           box.children.map(&:width).max || 0
@@ -88,6 +83,130 @@ module SilkLayout
           box.padding[:top] + box.padding[:bottom] +
           box.border[:top] + box.border[:bottom]
       end
+
+      def self.resolve_spacing(box, available_width)
+        box.margin = resolved_edges(box, "margin", available_width, box.margin)
+        box.padding = resolved_edges(box, "padding", available_width, box.padding)
+      end
+
+      def self.resolved_edges(box, property, available_width, fallback)
+        style = box.node&.computed_style
+        values = CSS::Values.expanded_edges(style&.[](property))
+
+        {
+          top: resolved_edge(style, property, :top, values, available_width, fallback[:top]),
+          right: resolved_edge(style, property, :right, values, available_width, fallback[:right]),
+          bottom: resolved_edge(style, property, :bottom, values, available_width, fallback[:bottom]),
+          left: resolved_edge(style, property, :left, values, available_width, fallback[:left])
+        }
+      end
+
+      def self.resolved_edge(style, property, side, values, available_width, fallback)
+        raw = style&.[]("#{property}-#{side}") || values[side]
+        return fallback unless raw
+
+        CSS::Values.resolve_length(raw, reference: available_width, default: fallback)
+      end
+
+      def self.resolved_content_width(box, available_width)
+        content_width =
+          if box.explicit_width
+            content_width_from_css_width(box, declared_width(box, available_width))
+          else
+            auto_content_width(box, available_width)
+          end
+
+        [content_width, 0].max
+      end
+
+      def self.declared_width(box, available_width)
+        raw = style_value(box, "width")
+        width =
+          if raw && raw != "auto" && !preserve_assigned_width?(box, raw, available_width)
+            CSS::Values.resolve_length(raw, reference: available_width, default: box.width)
+          else
+            box.width
+          end
+
+        constrain_css_width(box, width, available_width)
+      end
+
+      def self.auto_content_width(box, available_width)
+        content_width =
+          available_width -
+          box.margin[:left] - box.margin[:right] -
+          box.border[:left] - box.border[:right] -
+          box.padding[:left] - box.padding[:right]
+
+        constrained_width =
+          if border_box_sizing?(box)
+            constrain_css_width(box, content_width + horizontal_box_edges(box), available_width)
+          else
+            constrain_css_width(box, content_width, available_width)
+          end
+
+        content_width_from_css_width(box, constrained_width)
+      end
+
+      def self.constrain_css_width(box, width, available_width)
+        min_width = optional_width(box, "min-width", available_width)
+        max_width = optional_width(box, "max-width", available_width)
+
+        width = [width, min_width].max if min_width
+        width = [width, max_width].min if max_width
+        width
+      end
+
+      def self.optional_width(box, property, available_width)
+        raw = style_value(box, property)
+        return nil if raw.nil? || raw == "none" || raw == "auto"
+
+        CSS::Values.resolve_length(raw, reference: available_width, default: 0)
+      end
+
+      def self.content_width_from_css_width(box, width)
+        return width unless border_box_sizing?(box)
+
+        width - horizontal_box_edges(box)
+      end
+
+      def self.declared_height(box)
+        raw = style_value(box, "height")
+        return box.height if raw.nil? || raw == "auto"
+
+        CSS::Values.resolve_length(raw, default: box.height)
+      end
+
+      def self.content_height_from_css_height(box, height)
+        content_height = border_box_sizing?(box) ? height - vertical_box_edges(box) : height
+
+        [content_height, 0].max
+      end
+
+      def self.border_box_sizing?(box)
+        style_value(box, "box-sizing") == "border-box"
+      end
+
+      def self.horizontal_box_edges(box)
+        box.border[:left] + box.border[:right] + box.padding[:left] + box.padding[:right]
+      end
+
+      def self.vertical_box_edges(box)
+        box.border[:top] + box.border[:bottom] + box.padding[:top] + box.padding[:bottom]
+      end
+
+      def self.preserve_assigned_width?(box, raw_width, available_width)
+        return false if CSS::Values.reference_relative?(raw_width)
+
+        available_width && box.width == available_width
+      end
+
+      def self.style_value(box, property)
+        value = box.node&.computed_style&.[](property)
+        return nil if value.to_s.strip.empty?
+
+        value
+      end
     end
   end
 end

data/lib/silk_layout/layout/box.rb

@@ -18,7 +18,12 @@ module SilkLayout
         :explicit_height,
         :flex,
         :display,
-        :has_border
+        :has_border,
+        :replaced,
+        :image_source,
+        :image_resource,
+        :intrinsic_width,
+        :intrinsic_height
 
       def initialize(node)
         @node = node
@@ -44,6 +49,11 @@ module SilkLayout
         @explicit_height = false
         @flex = {}
         @display = nil
+        @replaced = false
+        @image_source = nil
+        @image_resource = nil
+        @intrinsic_width = nil
+        @intrinsic_height = nil
       end
 
       def add_child(box)
@@ -65,6 +75,34 @@ module SilkLayout
       def border_box_height
         height
       end
+
+      def content_box_x
+        x + border[:left] + padding[:left]
+      end
+
+      def content_box_y
+        y + border[:top] + padding[:top]
+      end
+
+      def content_box_width
+        [width - border[:left] - border[:right] - padding[:left] - padding[:right], 0].max
+      end
+
+      def content_box_height
+        [height - border[:top] - border[:bottom] - padding[:top] - padding[:bottom], 0].max
+      end
+
+      def replaced?
+        replaced
+      end
+
+      def image?
+        !image_resource.nil?
+      end
+
+      def image_path
+        image_resource&.path
+      end
     end
 
     class BlockBox < Box; end

data/lib/silk_layout/layout/context.rb

@@ -3,10 +3,15 @@
 module SilkLayout
   module Layout
     class Context
-      attr_reader :width
+      attr_reader :width, :page_size
 
-      def initialize(width:)
+      def initialize(width:, page_size: nil)
         @width = width
+        @page_size = page_size
+      end
+
+      def viewport_width
+        width
       end
     end
   end

data/lib/silk_layout/layout/engine.rb

@@ -5,18 +5,28 @@ module SilkLayout
     class Engine
       DEFAULT_VIEWPORT_WIDTH = 800
 
-      def self.layout(dom, css_rules, viewport_width: DEFAULT_VIEWPORT_WIDTH)
+      def self.layout(dom, css_rules, viewport_width: nil, page_size: nil)
         CSS::Cascade.apply(dom, css_rules)
 
         box_tree = FormattingBuilder.build(dom)
 
         root = Root.find(box_tree)
 
-        context = Context.new(width: viewport_width)
+        context = Context.new(width: viewport_width || page_width(page_size) || DEFAULT_VIEWPORT_WIDTH, page_size: page_size)
         BlockLayout.layout(root, context)
 
         root
       end
+
+      def self.page_width(page_size)
+        case page_size
+        when Array
+          page_size[0]
+        when Hash
+          page_size[:width] || page_size["width"]
+        end
+      end
+      private_class_method :page_width
     end
   end
 end

data/lib/silk_layout/layout/flex_layout.rb

@@ -282,6 +282,7 @@ module SilkLayout
         end
 
         BlockLayout.layout(child, @context, 0, 0, width)
+        child.height = [height, 0].max + vertical_box_edges(child) if height
       end
 
       def row_base_content(child)

data/lib/silk_layout/layout/formatting_builder.rb

@@ -19,6 +19,7 @@ module SilkLayout
         "strong" => "inline",
         "em" => "inline",
         "br" => "inline",
+        "img" => "inline",
         "h1" => "block",
         "h2" => "block",
         "h3" => "block",
@@ -131,10 +132,75 @@ module SilkLayout
 
         box.background_color = color(background_color(style))
         box.flex = flex_values(style)
+        apply_image_data(box, node, style)
 
         box
       end
 
+      def apply_image_data(box, node, style)
+        return unless node.tag == "img"
+
+        source = node.resolved_source_url || node.attributes["src"]
+        image = SilkLayout::Resource::Image.load(source)
+
+        box.replaced = true
+        box.image_source = source.to_s
+        box.image_resource = image
+        box.intrinsic_width = image&.width
+        box.intrinsic_height = image&.height
+
+        box.width, box.height = replaced_dimensions(style, node.attributes, image)
+        box.explicit_width = true
+        box.explicit_height = true
+      end
+
+      def replaced_dimensions(style, attributes, image)
+        attr_width = html_dimension(attributes["width"])
+        attr_height = html_dimension(attributes["height"])
+        css_width = css_replaced_dimension(style, "width")
+        css_height = css_replaced_dimension(style, "height")
+
+        width = css_width.nil? ? attr_width : css_width
+        height = css_height.nil? ? attr_height : css_height
+        ratio = image&.aspect_ratio || aspect_ratio(attr_width, attr_height)
+
+        if width.nil? && height.nil?
+          width = image&.width || 0
+          height = image&.height || 0
+        elsif width.nil?
+          width = ratio ? height * ratio : (image&.width || 0)
+        elsif height.nil?
+          height = ratio ? width / ratio : (image&.height || 0)
+        end
+
+        [width.to_f, height.to_f]
+      end
+
+      def html_dimension(value)
+        raw = value.to_s.strip
+        return nil if raw.empty?
+
+        raw = raw.delete_suffix("px")
+        return nil unless raw.match?(/\A[-+]?\d*\.?\d+\z/)
+
+        raw.to_f
+      end
+
+      def aspect_ratio(width, height)
+        return nil unless width&.positive? && height&.positive?
+
+        width.to_f / height
+      end
+
+      def css_replaced_dimension(style, property)
+        return nil unless style.public_send("explicit_#{property}?")
+
+        raw = style[property]
+        return nil if CSS::Values.reference_relative?(raw)
+
+        CSS::Values.resolve_length(raw, default: nil)
+      end
+
       def build_text(node)
         return nil unless node.text
 
@@ -261,20 +327,7 @@ module SilkLayout
       end
 
       def expanded_values(value)
-        tokens = split_tokens(value)
-
-        case tokens.length
-        when 0
-          {top: nil, right: nil, bottom: nil, left: nil}
-        when 1
-          {top: tokens[0], right: tokens[0], bottom: tokens[0], left: tokens[0]}
-        when 2
-          {top: tokens[0], right: tokens[1], bottom: tokens[0], left: tokens[1]}
-        when 3
-          {top: tokens[0], right: tokens[1], bottom: tokens[2], left: tokens[1]}
-        else
-          {top: tokens[0], right: tokens[1], bottom: tokens[2], left: tokens[3]}
-        end
+        CSS::Values.expanded_edges(value)
       end
 
       def border_shorthand(value)
@@ -371,9 +424,10 @@ module SilkLayout
       end
 
       def color(value)
-        return nil unless value
+        parsed = SilkLayout::CSS::Color.parse(value)
+        return nil unless parsed
 
-        value.to_sym
+        parsed.to_sym
       end
 
       def number(value, default)
@@ -386,7 +440,7 @@ module SilkLayout
       end
 
       def split_tokens(value)
-        value.to_s.strip.split(/\s+/).reject(&:empty?)
+        CSS::Values.split_tokens(value)
       end
 
       def numeric?(value)
@@ -415,8 +469,8 @@ module SilkLayout
       def color_token?(value)
         raw = value.to_s.strip
         return false if raw.empty?
-        return true if raw.start_with?("#")
-        return false if %w[none transparent inherit initial unset].include?(raw)
+        return true if SilkLayout::CSS::Color.parse(raw)
+        return false if %w[none inherit initial unset].include?(raw)
 
         !border_width?(raw) && !border_style?(raw) && !raw.include?("(") && !raw.include?("/")
       end

data/lib/silk_layout/layout/inline_formatter.rb

@@ -3,7 +3,7 @@
 module SilkLayout
   module Layout
     class InlineFormatter
-      Fragment = Struct.new(:box, :text, :width, :height, :break_after) do
+      Fragment = Struct.new(:box, :text, :width, :height, :break_after, :ascender) do
         def whitespace?
           text&.match?(/\A\s+\z/)
         end
@@ -11,7 +11,7 @@ module SilkLayout
 
       class << self
         def layout(inline_children, available_width, parent_x, parent_y)
-          fragments = flatten(inline_children)
+          fragments = flatten(inline_children, available_width)
           lines = []
           current_fragments = []
           current_y = parent_y
@@ -61,12 +61,13 @@ module SilkLayout
 
           line = LineBox.new
           cursor_x = 0
-          baseline = fragments.map { |fragment| fragment.box.ascender if fragment.box.is_a?(TextBox) }.compact.max || 0
+          baseline = fragments.map { |fragment| fragment_ascender(fragment) }.max || 0
+          descent = fragments.map { |fragment| fragment.height - fragment_ascender(fragment) }.max || 0
 
           fragments.each do |fragment|
             child = fragment.box
             child.x = parent_x + cursor_x
-            child.y = parent_y + baseline - child.ascender
+            child.y = parent_y + baseline - fragment_ascender(fragment)
             child.width = fragment.width
             child.height = fragment.height
             cursor_x += child.width
@@ -74,7 +75,7 @@ module SilkLayout
           end
 
           line.width = cursor_x
-          line.height = fragments.map(&:height).max || 0
+          line.height = baseline + descent
           line.x = parent_x
           line.y = parent_y
           line
@@ -86,25 +87,98 @@ module SilkLayout
           trimmed
         end
 
-        def flatten(boxes)
-          boxes.flat_map { |box| flatten_box(box) }
+        def flatten(boxes, available_width)
+          boxes.flat_map { |box| flatten_box(box, available_width) }
         end
 
-        def flatten_box(box)
+        def flatten_box(box, available_width)
           case box
           when TextBox
             tokenize_text(box)
           when InlineBox
-            if box.node&.tag == "br"
+            if box.respond_to?(:replaced?) && box.replaced?
+              [replaced_fragment(box, available_width)]
+            elsif box.node&.tag == "br"
               [Fragment.new(box: box, break_after: true)]
             else
-              flatten(box.children)
+              flatten(box.children, available_width)
             end
           else
             []
           end
         end
 
+        def replaced_fragment(box, available_width)
+          content_width, content_height = replaced_content_size(box, available_width)
+          width = content_width + horizontal_box_edges(box)
+          height = content_height + vertical_box_edges(box)
+
+          Fragment.new(
+            box: box,
+            width: width,
+            height: height,
+            ascender: height
+          )
+        end
+
+        def replaced_content_size(box, available_width)
+          width = resolved_replaced_width(box, available_width)
+          height = resolved_replaced_height(box)
+          ratio = aspect_ratio(box)
+
+          if width.nil? && height
+            width = ratio ? height * ratio : box.width
+          elsif height.nil? && width
+            height = ratio ? width / ratio : box.height
+          end
+
+          [width || box.width, height || box.height].map { |value| [value, 0].max }
+        end
+
+        def resolved_replaced_width(box, available_width)
+          raw = style_value(box, "width")
+          return box.width if raw.nil? || raw == "auto"
+
+          width = CSS::Values.resolve_length(raw, reference: available_width, default: box.width)
+          border_box_sizing?(box) ? width - horizontal_box_edges(box) : width
+        end
+
+        def resolved_replaced_height(box)
+          raw = style_value(box, "height")
+          return nil if raw.nil? || raw == "auto"
+
+          height = CSS::Values.resolve_length(raw, default: box.height)
+          border_box_sizing?(box) ? height - vertical_box_edges(box) : height
+        end
+
+        def aspect_ratio(box)
+          image_ratio = box.image_resource&.aspect_ratio
+          return image_ratio if image_ratio
+
+          return nil unless box.width.positive? && box.height.positive?
+
+          box.width.to_f / box.height
+        end
+
+        def border_box_sizing?(box)
+          style_value(box, "box-sizing") == "border-box"
+        end
+
+        def horizontal_box_edges(box)
+          box.border[:left] + box.border[:right] + box.padding[:left] + box.padding[:right]
+        end
+
+        def vertical_box_edges(box)
+          box.border[:top] + box.border[:bottom] + box.padding[:top] + box.padding[:bottom]
+        end
+
+        def style_value(box, property)
+          value = box.node&.computed_style&.[](property)
+          return nil if value.to_s.strip.empty?
+
+          value
+        end
+
         def tokenize_text(box)
           box.text.scan(/\s+|\S+/).map do |token|
             fragment_box = box.clone_with_text(token)
@@ -126,6 +200,10 @@ module SilkLayout
             font_style: box.font_style
           )
         end
+
+        def fragment_ascender(fragment)
+          fragment.ascender || (fragment.box.is_a?(TextBox) ? fragment.box.ascender : fragment.height)
+        end
       end
     end
   end

data/lib/silk_layout/layout/root.rb

@@ -4,11 +4,10 @@ module SilkLayout
   module Layout
     class Root
       def self.find(box)
-        current = box
-        while current.node&.tag == "html" || current.node&.tag == "body"
-          current = current.children.first
-        end
-        current
+        return nil unless box
+        return box unless box.node&.tag == "html"
+
+        box.children.find { |child| child.node&.tag == "body" } || box
       end
     end
   end

data/lib/silk_layout/render/painter.rb

@@ -9,6 +9,7 @@ module SilkLayout
 
       def self.paint_box(canvas, box, page_height_pt)
         draw_background(canvas, box, page_height_pt)
+        paint_image(canvas, box, page_height_pt) if box.respond_to?(:image?) && box.image?
         draw_borders(canvas, box, page_height_pt)
 
         if box.is_a?(SilkLayout::Layout::TextBox)
@@ -37,6 +38,21 @@ module SilkLayout
         canvas.text(box.text, at: [x_pt, y_pt])
       end
 
+      def self.paint_image(canvas, box, page_height_pt)
+        return unless box.image_path && File.file?(box.image_path)
+
+        width = box.content_box_width
+        height = box.content_box_height
+        return unless width.positive? && height.positive?
+
+        x_pt = PdfRenderer.px_to_pt(box.content_box_x)
+        y_pt = page_height_pt - PdfRenderer.px_to_pt(box.content_box_y + height)
+        width_pt = PdfRenderer.px_to_pt(width)
+        height_pt = PdfRenderer.px_to_pt(height)
+
+        canvas.image(box.image_path, at: [x_pt, y_pt], width: width_pt, height: height_pt)
+      end
+
       def self.draw_background(canvas, box, page_height_pt)
         return if box.is_a?(SilkLayout::Layout::AnonymousBlockBox)
         return unless box.respond_to?(:background_color) && box.background_color
@@ -183,20 +199,7 @@ module SilkLayout
       end
 
       def self.rgb_color(color)
-        normalized = color.to_s.strip.downcase
-        return nil if normalized.empty? || normalized == "transparent"
-
-        return hex_color(normalized) if normalized.start_with?("#")
-
-        NAMED_COLORS[normalized.to_sym]
-      end
-
-      def self.hex_color(color)
-        hex = color.delete_prefix("#")
-        hex = hex.chars.flat_map { |char| [char, char] }.join if hex.length == 3
-        return nil unless hex.match?(/\A[0-9a-f]{6}\z/)
-
-        hex.scan(/../).map { |component| component.to_i(16) }
+        SilkLayout::CSS::Color.rgb(color)
       end
 
       def self.draw_corner(canvas, x, y, w, h, vertical_color, horizontal_color, kind)
@@ -233,15 +236,6 @@ module SilkLayout
       end
 
       private_class_method :paint_box
-
-      NAMED_COLORS = {
-        black: [0, 0, 0],
-        blue: [0, 0, 255],
-        green: [0, 128, 0],
-        lightblue: [173, 216, 230],
-        red: [255, 0, 0],
-        white: [255, 255, 255]
-      }.freeze
     end
   end
 end