bandoola 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 399aa72c7e648f1d22ac8e4c8a3dabd5bec6cb1cbdab69f198c07c678ead2e7e
-  data.tar.gz: c2911c8a52cc62d55df0e5ab93c41ac45bcb13647b35ea805640454b37b029d5
+  metadata.gz: ca546c7de64a2889f63c5d6263add435f60097dabd9b5a7f7019dcd411993eb6
+  data.tar.gz: aac0858803151d55f36cd237278ca8e54bf82b7a098f760749ff0b5fc4b19ff0
 SHA512:
-  metadata.gz: 9a3601d9583eb626212aea6b50a929c810cf38a40d47072e02b323455227bb0e4ba83dab3d1fcf49252d663563d2990527fce2b8d8a443e9203d4588deadda16
-  data.tar.gz: 3da607cdeef5663505cc48f02b1849750da611369c495b5601f3d87d40b3ef460207367b7427cad9c14b6365b903215b43dcaf06966f6452494faa2ffdac2faa
+  metadata.gz: 8985871cdc3266c7a2ed27a00488e1faab5757c79e558725acad21f15705af21f2de4b208d85cf7c4b1783082961d614241bff473d8605a3e609f8d262e70b01
+  data.tar.gz: 97b668f1390c7b01cef9575c93c9d865d40bc20b3ce76d8472bccc5a5d8bc879ef3b61ebb1ab7d2a25518102443b8584a2fc442a7900a529ed53f231c4d9e9f6

data/CHANGELOG.md

@@ -1,5 +1,38 @@
 ## [Unreleased]
 
+## [0.2.0] - 2026-09-30
+
+### Added
+
+- `span` element: inline text. Consecutive spans flow together as one wrapped
+  paragraph, each with its own font, weight, size and color.
+- `a(href:)` element: an inline, clickable link (a PDF `/Link` annotation with a
+  URI action). Wrapped links are clickable on every line. Unstyled by default.
+- `underline` / `no-underline` classes for `text`, `span` and `a`.
+- Line height: `leading-none`, `leading-tight`, `leading-snug`,
+  `leading-normal`, `leading-relaxed`, `leading-loose` (relative to the text
+  size) and `leading-3` … `leading-10` (fixed). Inherited from a `div`, like CSS.
+- Border variants: bare `border`, and per-edge `border-t/-r/-b/-l/-x/-y`,
+  optionally with a width (`border-b-2`). Partial borders are straight edges.
+- SVG masks: `<mask>` definitions (their `<path>`/`<rect>` children) clip the
+  paths or groups that reference them via `mask="url(#id)"`.
+- Tests and samples covering every font weight from `font-thin` to `font-black`.
+
+### Changed
+
+- The extra space a line height adds is now split evenly above and below the
+  text, as in CSS, instead of all going below. Text at the default size sits 2pt
+  lower in its box than in 0.1.0; box sizes are unchanged.
+
+### Fixed
+
+- Standard-font widths for WinAnsi's 0x80–0x9F characters (— – “ ” ‘ ’ € … •
+  ™ Š Ž Œ and the rest). They used to be measured at the width of "?", so
+  wrapping and alignment were off and text after one of them could overlap the
+  next span.
+- Standard-font widths of the straight apostrophe `'` and the backtick, which
+  used Adobe StandardEncoding's curly-quote widths instead of WinAnsi's glyphs.
+
 ## [0.1.0] - 2026-06-16
 
 - Initial release

data/README.md

@@ -32,7 +32,14 @@ space-separated string or an array of tokens) and, where it makes sense, a block
 - `div(class:) { … }` — a block-level box that lays out the elements inside it.
 - `text(class:) { "…" }` — a run of text; the block returns the string. It wraps
   to its box width, and embedded newlines start new lines.
-- `img(src:, class:)` — an image; `src` is a path to an SVG or JPEG.
+- `span(class:) { "…" }` — inline text. Consecutive spans flow together as one
+  wrapped paragraph, each with its own weight, size and color:
+  `div { span { "This is " }; span(class: "font-bold") { "cool" } }`.
+- `a(href:, class:) { "…" }` — a clickable link to `href`. It flows inline like
+  `span` and is unstyled by default, so add e.g. `class: "underline text-blue-800"`.
+- `img(src:, class:)` — an image; `src` is a path to an SVG or JPEG. SVG support
+  covers solid-filled `<path>`s, `<g>` groups and `<mask>` clipping — enough for
+  icons and logos, but no gradients, strokes or text.
 
 Elements flow like HTML blocks: each fills its container's width and stacks below
 the previous one, unless a width class makes it share a row (and reflow).
@@ -46,22 +53,52 @@ for the full scales. What Bandoola understands today:
 | --- | --- |
 | Padding / margin | `p-4`, `px-2`, `pt-1`, `m-4`, `mx-2`, … |
 | Width / height | `w-32`, `w-1/2`, `w-full`, `h-16`, `h-1/2`, `h-full` |
-| Border width | `border-1` … `border-16` |
+| Border width | `border`, `border-1` … `border-16`; per edge `border-t`, `-r`, `-b`, `-l`, `-x`, `-y` (e.g. `border-b-2`) |
 | Border radius | `rounded`, `rounded-sm` … `rounded-3xl`, `rounded-full` |
 | Background | `bg-cyan-100`, `bg-slate-800`, `bg-black`, `bg-white` |
 | Border color | `border-blue-600` (needs a border width to show) |
 | Text color | `text-rose-500`, `text-white` |
 | Font family | `font-sans`, `font-serif`, `font-mono`, `font-<registered>` |
-| Font weight | `font-light` … `font-black` |
+| Font weight | `font-thin`, `font-extralight`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black` |
 | Text size | `text-xs` … `text-9xl` |
+| Text decoration | `underline`, `no-underline` |
+| Line height | `leading-none`, `-tight`, `-snug`, `-normal`, `-relaxed`, `-loose`; `leading-3` … `leading-10` |
 
 Sizes and spacing are points (1px ≈ 1pt). Notes:
 
 - `div` has no fill or border by default — add `bg-*`, `border-*`, or `rounded-*`.
 - Colors work on the full Tailwind palette plus `black`/`white`; a color with
   no shade (`bg-cyan`) uses 500.
-- A `div`'s `font-*` family and weight are inherited by the text inside it; text
-  size is set per `text` element.
+- A `div`'s `font-*` family and weight and its `leading-*` are inherited by the
+  text inside it; text size is set per `text` element.
+- `leading-tight` etc. are multiples of each element's own text size, while
+  `leading-6` is a fixed height (24pt). As in CSS, the extra space is split evenly
+  above and below the text.
+- The standard fonts only have regular and bold faces: weights below normal
+  render as normal, and in-between or heavier weights use the nearest face plus a
+  synthetic (faux-bold) stroke. Register a file per weight (`thin:`, `black:`, …)
+  to get real faces.
+- Spans ignore padding, margin and alignment classes.
+
+## Inline text & links
+
+`span` and `a` flow inline: consecutive ones form a single paragraph that wraps
+across them, so each piece can have its own styling. A `text`, `div` or `img`
+between them starts a new paragraph.
+
+```ruby
+div(class: "leading-relaxed") do
+  span { "Bandoola is " }
+  span(class: "font-bold") { "cool " }
+  span { "and you can read " }
+  a(class: "underline text-blue-800", href: "https://www.example.com") { "the docs" }
+  span { "." }
+end
+```
+
+Links become clickable areas in the PDF that open their `href`. Like in
+Tailwind, they have no styling by default, so give them a color and `underline`.
+Line height (`leading-*`) set on the `div` applies to every span in it.
 
 ## Fonts
 

data/lib/bandoola/standard_metrics.rb

@@ -1,11 +1,15 @@
 module Bandoola
   class StandardFont
-    # Adobe Core font advance widths (1000-unit em) by WinAnsi/Latin-1 code
-    # point, for the standard PDF faces families map to. Used to measure and
-    # wrap text. Courier is monospace, handled in code.
+    # Adobe Core font advance widths (1000-unit em) by Unicode code point, for
+    # the standard PDF faces families map to. Used to measure and wrap text.
+    # They cover every WinAnsi character: ASCII, Latin-1 (160-255) and the
+    # 0x80-0x9F extras (curly quotes, dashes, €, …), which sit at their Unicode
+    # code points (U+2014 for the em dash). Codes 39 and 96 are WinAnsi's
+    # quotesingle and grave, not Adobe StandardEncoding's curly quotes.
+    # Courier is monospace, handled in code.
     METRICS = {
       "Helvetica" => {
-        32 => 278, 33 => 278, 34 => 355, 35 => 556, 36 => 556, 37 => 889, 38 => 667, 39 => 222,
+        32 => 278, 33 => 278, 34 => 355, 35 => 556, 36 => 556, 37 => 889, 38 => 667, 39 => 191,
         40 => 333, 41 => 333, 42 => 389, 43 => 584, 44 => 278, 45 => 333, 46 => 278, 47 => 278,
         48 => 556, 49 => 556, 50 => 556, 51 => 556, 52 => 556, 53 => 556, 54 => 556, 55 => 556,
         56 => 556, 57 => 556, 58 => 278, 59 => 278, 60 => 584, 61 => 584, 62 => 584, 63 => 556,
@@ -13,7 +17,7 @@ module Bandoola
         72 => 722, 73 => 278, 74 => 500, 75 => 667, 76 => 556, 77 => 833, 78 => 722, 79 => 778,
         80 => 667, 81 => 778, 82 => 722, 83 => 667, 84 => 611, 85 => 722, 86 => 667, 87 => 944,
         88 => 667, 89 => 667, 90 => 611, 91 => 278, 92 => 278, 93 => 278, 94 => 469, 95 => 556,
-        96 => 222, 97 => 556, 98 => 556, 99 => 500, 100 => 556, 101 => 556, 102 => 278, 103 => 556,
+        96 => 333, 97 => 556, 98 => 556, 99 => 500, 100 => 556, 101 => 556, 102 => 278, 103 => 556,
         104 => 556, 105 => 222, 106 => 222, 107 => 500, 108 => 222, 109 => 833, 110 => 556, 111 => 556,
         112 => 556, 113 => 556, 114 => 333, 115 => 500, 116 => 278, 117 => 556, 118 => 500, 119 => 722,
         120 => 500, 121 => 500, 122 => 500, 123 => 334, 124 => 260, 125 => 334, 126 => 584, 160 => 278,
@@ -28,10 +32,14 @@ module Bandoola
         225 => 556, 226 => 556, 227 => 556, 228 => 556, 229 => 556, 230 => 889, 231 => 500, 232 => 556,
         233 => 556, 234 => 556, 235 => 556, 236 => 278, 237 => 278, 238 => 278, 239 => 278, 240 => 556,
         241 => 556, 242 => 556, 243 => 556, 244 => 556, 245 => 556, 246 => 556, 247 => 584, 248 => 611,
-        249 => 556, 250 => 556, 251 => 556, 252 => 556, 253 => 500, 254 => 556, 255 => 500
+        249 => 556, 250 => 556, 251 => 556, 252 => 556, 253 => 500, 254 => 556, 255 => 500, 338 => 1000,
+        339 => 944, 352 => 667, 353 => 500, 376 => 667, 381 => 611, 382 => 500, 402 => 556, 710 => 333,
+        732 => 333, 8211 => 556, 8212 => 1000, 8216 => 222, 8217 => 222, 8218 => 222, 8220 => 333, 8221 => 333,
+        8222 => 333, 8224 => 556, 8225 => 556, 8226 => 350, 8230 => 1000, 8240 => 1000, 8249 => 333, 8250 => 333,
+        8364 => 556, 8482 => 1000
       },
       "Helvetica-Bold" => {
-        32 => 278, 33 => 333, 34 => 474, 35 => 556, 36 => 556, 37 => 889, 38 => 722, 39 => 278,
+        32 => 278, 33 => 333, 34 => 474, 35 => 556, 36 => 556, 37 => 889, 38 => 722, 39 => 238,
         40 => 333, 41 => 333, 42 => 389, 43 => 584, 44 => 278, 45 => 333, 46 => 278, 47 => 278,
         48 => 556, 49 => 556, 50 => 556, 51 => 556, 52 => 556, 53 => 556, 54 => 556, 55 => 556,
         56 => 556, 57 => 556, 58 => 333, 59 => 333, 60 => 584, 61 => 584, 62 => 584, 63 => 611,
@@ -39,7 +47,7 @@ module Bandoola
         72 => 722, 73 => 278, 74 => 556, 75 => 722, 76 => 611, 77 => 833, 78 => 722, 79 => 778,
         80 => 667, 81 => 778, 82 => 722, 83 => 667, 84 => 611, 85 => 722, 86 => 667, 87 => 944,
         88 => 667, 89 => 667, 90 => 611, 91 => 333, 92 => 278, 93 => 333, 94 => 584, 95 => 556,
-        96 => 278, 97 => 556, 98 => 611, 99 => 556, 100 => 611, 101 => 556, 102 => 333, 103 => 611,
+        96 => 333, 97 => 556, 98 => 611, 99 => 556, 100 => 611, 101 => 556, 102 => 333, 103 => 611,
         104 => 611, 105 => 278, 106 => 278, 107 => 556, 108 => 278, 109 => 889, 110 => 611, 111 => 611,
         112 => 611, 113 => 611, 114 => 389, 115 => 556, 116 => 333, 117 => 611, 118 => 556, 119 => 778,
         120 => 556, 121 => 556, 122 => 500, 123 => 389, 124 => 280, 125 => 389, 126 => 584, 160 => 278,
@@ -54,10 +62,14 @@ module Bandoola
         225 => 556, 226 => 556, 227 => 556, 228 => 556, 229 => 556, 230 => 889, 231 => 556, 232 => 556,
         233 => 556, 234 => 556, 235 => 556, 236 => 278, 237 => 278, 238 => 278, 239 => 278, 240 => 611,
         241 => 611, 242 => 611, 243 => 611, 244 => 611, 245 => 611, 246 => 611, 247 => 584, 248 => 611,
-        249 => 611, 250 => 611, 251 => 611, 252 => 611, 253 => 556, 254 => 611, 255 => 556
+        249 => 611, 250 => 611, 251 => 611, 252 => 611, 253 => 556, 254 => 611, 255 => 556, 338 => 1000,
+        339 => 944, 352 => 667, 353 => 556, 376 => 667, 381 => 611, 382 => 500, 402 => 556, 710 => 333,
+        732 => 333, 8211 => 556, 8212 => 1000, 8216 => 278, 8217 => 278, 8218 => 278, 8220 => 500, 8221 => 500,
+        8222 => 500, 8224 => 556, 8225 => 556, 8226 => 350, 8230 => 1000, 8240 => 1000, 8249 => 333, 8250 => 333,
+        8364 => 556, 8482 => 1000
       },
       "Times-Roman" => {
-        32 => 250, 33 => 333, 34 => 408, 35 => 500, 36 => 500, 37 => 833, 38 => 778, 39 => 333,
+        32 => 250, 33 => 333, 34 => 408, 35 => 500, 36 => 500, 37 => 833, 38 => 778, 39 => 180,
         40 => 333, 41 => 333, 42 => 500, 43 => 564, 44 => 250, 45 => 333, 46 => 250, 47 => 278,
         48 => 500, 49 => 500, 50 => 500, 51 => 500, 52 => 500, 53 => 500, 54 => 500, 55 => 500,
         56 => 500, 57 => 500, 58 => 278, 59 => 278, 60 => 564, 61 => 564, 62 => 564, 63 => 444,
@@ -80,10 +92,14 @@ module Bandoola
         225 => 444, 226 => 444, 227 => 444, 228 => 444, 229 => 444, 230 => 667, 231 => 444, 232 => 444,
         233 => 444, 234 => 444, 235 => 444, 236 => 278, 237 => 278, 238 => 278, 239 => 278, 240 => 500,
         241 => 500, 242 => 500, 243 => 500, 244 => 500, 245 => 500, 246 => 500, 247 => 564, 248 => 500,
-        249 => 500, 250 => 500, 251 => 500, 252 => 500, 253 => 500, 254 => 500, 255 => 500
+        249 => 500, 250 => 500, 251 => 500, 252 => 500, 253 => 500, 254 => 500, 255 => 500, 338 => 889,
+        339 => 722, 352 => 556, 353 => 389, 376 => 722, 381 => 611, 382 => 444, 402 => 500, 710 => 333,
+        732 => 333, 8211 => 500, 8212 => 1000, 8216 => 333, 8217 => 333, 8218 => 333, 8220 => 444, 8221 => 444,
+        8222 => 444, 8224 => 500, 8225 => 500, 8226 => 350, 8230 => 1000, 8240 => 1000, 8249 => 333, 8250 => 333,
+        8364 => 500, 8482 => 980
       },
       "Times-Bold" => {
-        32 => 250, 33 => 333, 34 => 555, 35 => 500, 36 => 500, 37 => 1000, 38 => 833, 39 => 333,
+        32 => 250, 33 => 333, 34 => 555, 35 => 500, 36 => 500, 37 => 1000, 38 => 833, 39 => 278,
         40 => 333, 41 => 333, 42 => 500, 43 => 570, 44 => 250, 45 => 333, 46 => 250, 47 => 278,
         48 => 500, 49 => 500, 50 => 500, 51 => 500, 52 => 500, 53 => 500, 54 => 500, 55 => 500,
         56 => 500, 57 => 500, 58 => 333, 59 => 333, 60 => 570, 61 => 570, 62 => 570, 63 => 500,
@@ -106,7 +122,11 @@ module Bandoola
         225 => 500, 226 => 500, 227 => 500, 228 => 500, 229 => 500, 230 => 722, 231 => 444, 232 => 444,
         233 => 444, 234 => 444, 235 => 444, 236 => 278, 237 => 278, 238 => 278, 239 => 278, 240 => 500,
         241 => 556, 242 => 500, 243 => 500, 244 => 500, 245 => 500, 246 => 500, 247 => 570, 248 => 500,
-        249 => 556, 250 => 556, 251 => 556, 252 => 556, 253 => 500, 254 => 556, 255 => 500
+        249 => 556, 250 => 556, 251 => 556, 252 => 556, 253 => 500, 254 => 556, 255 => 500, 338 => 1000,
+        339 => 722, 352 => 556, 353 => 389, 376 => 722, 381 => 667, 382 => 444, 402 => 500, 710 => 333,
+        732 => 333, 8211 => 500, 8212 => 1000, 8216 => 333, 8217 => 333, 8218 => 333, 8220 => 500, 8221 => 500,
+        8222 => 500, 8224 => 500, 8225 => 500, 8226 => 350, 8230 => 1000, 8240 => 1000, 8249 => 333, 8250 => 333,
+        8364 => 500, 8482 => 1000
       }
     }.freeze
   end

data/lib/bandoola/version.rb

@@ -1,3 +1,3 @@
 module Bandoola
-  VERSION = "0.1.0".freeze
+  VERSION = "0.2.0".freeze
 end

data/lib/bandoola/view/element.rb

@@ -270,6 +270,11 @@ module Bandoola
       # the font size. Tuned so font-bold (700) reads clearly bold.
       BOLD_STEP = 0.008
 
+      # The underline's gap below the baseline and its thickness, as fractions
+      # of the font size.
+      UNDERLINE_OFFSET = 0.1
+      UNDERLINE_THICKNESS = 0.06
+
       attr_reader :content
 
       def initialize(style, content)
@@ -280,6 +285,7 @@ module Bandoola
       # Wrap the text to the available width (using +typeset+'s measurer and the
       # effective font), storing the lines for paint, and return their height.
       def content_height(_left, _top, avail, _avail_height, typeset)
+        @line_height = line_height_for(typeset.leading)
         @lines = wrap(avail, typeset)
         @lines.length * line_height
       end
@@ -296,17 +302,33 @@ module Bandoola
 
         buffer << "q\n#{setup}" if setup
         wrapped.each_with_index do |line, index|
-          baseline = content_top - font_size - (index * line_height)
+          baseline = content_top - half_leading - font_size - (index * line_height)
           indent = align_indent(line, content_width, face)
-          # The font encodes the text (WinAnsi literal or Identity-H glyph ids).
-          buffer << "BT\n/#{name} #{font_size} Tf\n" \
-                    "#{coord(left + indent)} #{coord(baseline)} Td\n#{face.encode(line)} Tj\nET\n"
+          buffer << show(name, face, line, left + indent, baseline)
+          buffer << underline(left + indent, baseline, face.width_of(line, font_size))
         end
         buffer << "Q\n" if setup
       end
 
       private
 
+      # A text object drawing +line+ at (left, baseline). The font encodes the
+      # text (WinAnsi literal or Identity-H glyph ids).
+      def show(name, face, line, left, baseline)
+        "BT\n/#{name} #{font_size} Tf\n#{coord(left)} #{coord(baseline)} Td\n#{face.encode(line)} Tj\nET\n"
+      end
+
+      # With the underline class, a thin filled rule under a run +width+ wide,
+      # in the text color; otherwise nothing.
+      def underline(left, baseline, width)
+        return "" unless style.underline
+
+        thickness = font_size * UNDERLINE_THICKNESS
+        bottom = baseline - (font_size * UNDERLINE_OFFSET) - thickness
+        "q\n#{color_op(style.text_color || [0.0, 0.0, 0.0])}" \
+          "#{coord(left)} #{coord(bottom)} #{coord(width)} #{coord(thickness)} re\nf\nQ\n"
+      end
+
       # Horizontal offset for a line under the text-align class: 0 for the
       # default left, the leftover width for right, half of it for center.
       def align_indent(line, content_width, face)
@@ -361,10 +383,29 @@ module Bandoola
         style.text_size || FONT_SIZE
       end
 
-      # Line height scaled from the default proportion (LINE_HEIGHT for the
-      # default FONT_SIZE).
+      # The line height decided during layout (from a leading-* class, this
+      # element's or inherited), else the default.
       def line_height
-        (font_size * LINE_HEIGHT / FONT_SIZE.to_f).round
+        @line_height || line_height_for(nil)
+      end
+
+      # The line height under this element's leading, or +inherited+ when it
+      # has none. A ratio applies to this element's own font size (like a
+      # unitless CSS line-height); with no leading at all it's the default
+      # proportion (LINE_HEIGHT for the default FONT_SIZE).
+      def line_height_for(inherited)
+        kind, value = style.leading || inherited
+        case kind
+        when :ratio then font_size * value
+        when :fixed then value
+        else (font_size * LINE_HEIGHT / FONT_SIZE.to_f).round
+        end
+      end
+
+      # As in CSS, the space a line height adds beyond the font size is split
+      # evenly above and below the glyphs; this is the share above.
+      def half_leading
+        (line_height - font_size) / 2.0
       end
 
       # The graphics-state setup for a text run: a fill color (text-<color>)

data/lib/bandoola/view/header.rb

@@ -38,8 +38,8 @@ module Bandoola
       end
 
       # The document's objects, in order: catalog (1), pages (2), the N Page
-      # objects, the N content streams, then a block per used font and one
-      # XObject per used image. Object numbers are 1-based array positions.
+      # objects, the N content streams, then a block per used font, one
+      # XObject per used image and one annotation per link. Object numbers are 1-based array positions.
       def build_objects
         pages = @page_buffers.size
         first_page = 3
@@ -60,7 +60,14 @@ module Bandoola
           number += 1
         end
 
-        page_objects = Array.new(pages) { |i| page_object(first_content + i) }
+        annot_refs = @page_links.map do |links|
+          links.map do |rect, uri|
+            extras << link_annotation(rect, uri)
+            (number += 1) - 1
+          end
+        end
+
+        page_objects = Array.new(pages) { |i| page_object(first_content + i, annot_refs[i]) }
         content_objects = @page_buffers.map { |buffer| content_object(buffer) }
 
         [catalog, pages_object(first_page, pages, font_refs, image_refs), *page_objects, *content_objects, *extras]
@@ -79,8 +86,18 @@ module Bandoola
           "/MediaBox [0 0 #{width} #{height}] /Resources << #{resources} >> >>"
       end
 
-      def page_object(content_number)
-        "<< /Type /Page /Parent 2 0 R /Contents #{content_number} 0 R >>"
+      # A page lists its link annotations (by object number) in /Annots.
+      def page_object(content_number, annot_numbers)
+        annots = annot_numbers.empty? ? "" : " /Annots [#{annot_numbers.map { |n| "#{n} 0 R" }.join(" ")}]"
+        "<< /Type /Page /Parent 2 0 R /Contents #{content_number} 0 R#{annots} >>"
+      end
+
+      # A clickable area ([left, bottom, right, top]) that opens +uri+. No
+      # border, so it's invisible; the text's own styling marks it as a link.
+      def link_annotation(rect, uri)
+        corners = rect.map { |value| format("%.2f", value).sub(/\.?0+\z/, "") }.join(" ")
+        escaped = uri.gsub(/[\\()]/) { |char| "\\#{char}" }
+        "<< /Type /Annot /Subtype /Link /Rect [#{corners}] /Border [0 0 0] /A << /S /URI /URI (#{escaped}) >> >>"
       end
 
       def content_object(buffer)

data/lib/bandoola/view/inline.rb

@@ -0,0 +1,188 @@
+module Bandoola
+  class View
+    # A piece of inline text. Spans never lay themselves out; the InlineRun
+    # holding them breaks their words into lines and asks each span to measure
+    # and draw its share. A span's own font-*/weight classes win over the
+    # inherited ones, like Text; text-<size> and text-<color> apply per span.
+    # Padding, margin and alignment classes are ignored on spans.
+    class Span < Text
+      def family_for(font) = style.font || font
+      def weight_for(weight) = style.font_weight || weight
+      def size = font_size
+      # This span's line height under the inherited +typeset+ leading.
+      def leading(typeset) = line_height_for(typeset.leading)
+
+      # Width of +string+ in this span's face; 0 without a measurer.
+      def width_of(string, typeset)
+        return 0.0 unless typeset.measure
+
+        typeset.measure.call(string, family_for(typeset.font), weight_for(typeset.weight), size)
+      end
+
+      # Draw +string+ with its baseline starting at +origin+ ([x, y]), in the
+      # face resolved from the inherited [font, weight].
+      def paint_piece(buffer, resources, string, origin, inherited)
+        font, weight = inherited
+        name, native, face = resources.font(family_for(font), weight_for(weight))
+        setup = text_state(weight_for(weight) - native)
+
+        width = face.width_of(string, size)
+
+        buffer << "q\n#{setup}" if setup
+        buffer << show(name, face, string, *origin)
+        buffer << "Q\n" if setup
+        buffer << underline(*origin, width)
+        annotate(resources, origin, width)
+      end
+
+      private
+
+      # A hook for spans that attach something to the page where they're drawn.
+      def annotate(_resources, _origin, _width); end
+    end
+
+    # The a element: a span that is also a link. Each piece it draws gets a
+    # clickable area on its page pointing at +href+ (a URI).
+    class A < Span
+      # How far the clickable area reaches below the baseline and above it, as
+      # fractions of the font size — roughly the glyphs' descent and ascent.
+      DESCENT = 0.25
+      ASCENT = 0.9
+
+      attr_reader :href
+
+      def initialize(style, content, href)
+        super(style, content)
+        @href = href
+      end
+
+      private
+
+      def annotate(resources, origin, width)
+        left, baseline = origin
+        rect = [left, baseline - (size * DESCENT), left + width, baseline + (size * ASCENT)]
+        resources.add_link(rect, href)
+      end
+    end
+
+    # An anonymous block that holds consecutive spans and lays them out as one
+    # paragraph: a greedy word wrap across span boundaries, where each line is
+    # as tall as its tallest span and every span on it shares a baseline. Words
+    # break only at whitespace, so "cool" + "er" in two spans stays together.
+    class InlineRun < Element
+      def initialize
+        super(Style.none)
+      end
+
+      def content_height(_left, _top, avail, _avail_height, typeset)
+        @lines = LineBreaker.new(children, avail, typeset).lines
+        @lines.sum(&:height)
+      end
+
+      def paint(buffer, resources, font = "sans", weight = NORMAL_WEIGHT)
+        line_top = top
+        (@lines || []).each do |line|
+          baseline = line_top - line.ascent
+          line.pieces.each do |span, text, offset|
+            span.paint_piece(buffer, resources, text, [x + offset, baseline], [font, weight])
+          end
+          line_top -= line.height
+        end
+      end
+
+      # The spans have no geometry of their own; only the run moves.
+      def offset(delta)
+        @top += delta
+      end
+    end
+
+    # Breaks a run of spans into lines no wider than +avail+.
+    class LineBreaker
+      # +pieces+ are [span, text, x offset]; +ascent+ is the distance from the
+      # line's top to its shared baseline.
+      Line = Struct.new(:pieces, :width, :height, :ascent)
+
+      TOKEN = /\n|[^\S\n]+|\S+/
+
+      attr_reader :lines
+
+      def initialize(spans, avail, typeset)
+        @spans = spans
+        @avail = avail
+        @typeset = typeset
+        @lines = []
+        @line = new_line
+        @space = nil # [span, width] of the gap before the next word
+        chunks.each { |parts| consume(parts) }
+        finish(@spans.last) if @line.pieces.any? || @lines.empty?
+      end
+
+      private
+
+      # The spans' content as chunks: a hard break, a space, or a word — the
+      # [span, text] parts of adjacent non-space tokens, joined across spans.
+      def chunks
+        tokens = @spans.flat_map { |span| span.content.scan(TOKEN).map { |text| [span, text] } }
+        tokens.chunk_while { |(_, left), (_, right)| word?(left) && word?(right) }
+      end
+
+      def word?(text) = !text.match?(/\s/)
+
+      def consume(parts)
+        span, text = parts.first
+        if text == "\n"
+          finish(span)
+        elsif !word?(text)
+          @space = [span, span.width_of(" ", @typeset)] if @line.pieces.any?
+        else
+          place(parts)
+        end
+      end
+
+      # Add a word after the pending space, or start a new line when it would
+      # overflow this one.
+      def place(parts)
+        widths = parts.map { |span, text| span.width_of(text, @typeset) }
+        finish(parts.first[0]) if @line.pieces.any? && @line.width + gap + widths.sum > @avail + Element::EPSILON
+
+        cursor = @line.width + gap
+        parts.each_with_index do |(span, text), index|
+          if index.zero? && continues?(span)
+            @line.pieces.last[1] << " " << text # one run of the same span: draw it in a single Tj
+          else
+            @line.pieces << [span, +text, cursor]
+          end
+          cursor += widths[index]
+        end
+        @line.width = cursor
+        @space = nil
+      end
+
+      def gap = @space ? @space[1] : 0.0
+
+      # Whether +span+'s word joins the previous piece across a space in the same span.
+      def continues?(span)
+        last = @line.pieces.last
+        @space && last && last[0] == span && @space[0] == span
+      end
+
+      def new_line = Line.new([], 0.0, 0.0, 0.0)
+
+      # Close the current line and start a fresh one. Each span (or +fallback+
+      # when the line is empty) needs its font size plus half its extra leading
+      # above the baseline and the other half below; the line is tall enough
+      # for the most demanding span on each side, as in CSS.
+      def finish(fallback)
+        spans = @line.pieces.map(&:first)
+        spans = [fallback] if spans.empty?
+        halves = spans.map { |span| (span.leading(@typeset) - span.size) / 2.0 }
+        above = spans.zip(halves).map { |span, half| span.size + half }.max
+        @line.ascent = above
+        @line.height = above + halves.max
+        @lines << @line
+        @line = new_line
+        @space = nil
+      end
+    end
+  end
+end

data/lib/bandoola/view/resources.rb

@@ -13,6 +13,7 @@ module Bandoola
         @font_resolver = font_resolver
         @fonts = {}  # face key => [resource_name, font]
         @images = {} # image => [resource_name, image]
+        @links = []  # [rect, uri] on the page being painted
       end
 
       # The used fonts/images as [resource_name, …] pairs, in first-use order.
@@ -33,6 +34,19 @@ module Bandoola
         [entry[0], native, font]
       end
 
+      # Record a link area ([left, bottom, right, top]) on the current page.
+      def add_link(rect, uri)
+        @links << [rect, uri]
+      end
+
+      # The links recorded since the last call, i.e. those of the page just
+      # painted, leaving the list empty for the next page.
+      def take_links
+        links = @links
+        @links = []
+        links
+      end
+
       # Resource name for an image, deduped so the same image painted more than
       # once (e.g. a logo in a header repeated on every page) embeds once.
       def add_image(image)

data/lib/bandoola/view/style/typography.rb

@@ -5,6 +5,8 @@ module Bandoola
       #   font-sans / font-serif / font-mono / font-<name>  -> font family
       #   font-light/normal/medium/semibold/bold/...        -> font weight
       #   text-xs … text-9xl                                -> font size (pt)
+      #   underline / no-underline                          -> text decoration
+      #   leading-none/tight/…/loose, leading-3 … leading-10 -> line height
       #
       # The family is recorded by name (the View resolves it to an actual font
       # at render time). The weight is a number; since we don't carry separate
@@ -35,13 +37,41 @@ module Bandoola
 
         ALIGNMENTS = %w[left center right].freeze
 
-        attr_reader :font, :font_weight, :text_size, :text_align
+        # Tailwind's relative line heights, as multiples of the font size.
+        # leading-<n> is instead a fixed height on the spacing scale.
+        LEADINGS = {
+          "none" => 1.0, "tight" => 1.25, "snug" => 1.375, "normal" => 1.5,
+          "relaxed" => 1.625, "loose" => 2.0
+        }.freeze
+
+        # +leading+ is [:ratio, multiple] or [:fixed, points], or nil.
+        attr_reader :font, :font_weight, :text_size, :text_align, :underline, :leading
 
         def init_typography
           @font = nil
           @font_weight = nil
           @text_size = nil
           @text_align = nil
+          @underline = false
+          @leading = nil
+        end
+
+        def apply_leading_token(token)
+          return unless token.start_with?("leading-")
+
+          key = token.delete_prefix("leading-")
+          if (ratio = LEADINGS[key])
+            @leading = [:ratio, ratio]
+          elsif key.match?(/\A\d+\z/) && (points = SCALE[key.to_i])
+            @leading = [:fixed, points]
+          end
+        end
+
+        def apply_decoration_token(token)
+          case token
+          when "underline" then @underline = true
+          when "no-underline" then @underline = false
+          end
         end
 
         def apply_font_token(token)

data/lib/bandoola/view/style.rb

@@ -89,6 +89,8 @@ module Bandoola
         apply_color_token(token)
         apply_font_token(token)
         apply_text_token(token)
+        apply_decoration_token(token)
+        apply_leading_token(token)
       end
 
       def init_sizing

data/lib/bandoola/view.rb

@@ -2,6 +2,7 @@ require_relative "view/header"
 require_relative "view/file"
 require_relative "view/style"
 require_relative "view/element"
+require_relative "view/inline"
 require_relative "view/resources"
 
 module Bandoola
@@ -130,11 +131,11 @@ module Bandoola
 
     PAGE_BREAK_EPSILON = 0.01
 
-    # The inherited font/weight and a text measurer, threaded through layout so
-    # Text can wrap. #inherit applies a div's font classes to its children.
-    Typeset = Struct.new(:font, :weight, :measure) do
+    # The inherited font/weight/leading and a text measurer, threaded through
+    # layout so Text can wrap. #inherit applies a div's classes to its children.
+    Typeset = Struct.new(:font, :weight, :measure, :leading) do
       def inherit(style)
-        Typeset.new(style.font || font, style.font_weight || weight, measure)
+        Typeset.new(style.font || font, style.font_weight || weight, measure, style.leading || leading)
       end
     end
     # Used when a tree is laid out without typesetting (no wrapping).
@@ -170,14 +171,18 @@ module Bandoola
       body.layout(margin, body_top, content_width, body_height, @typeset)
       pages = paginate(body.children, body_height, body_top)
 
-      @page_buffers = pages.each_with_index.map do |children, index|
+      # Each page's buffer, plus the link areas painted onto it.
+      @page_buffers = []
+      @page_links = []
+      pages.each_with_index do |children, index|
         @page_number = index + 1
         @page_count = pages.size
         buffer = String.new(encoding: Encoding::ASCII_8BIT)
         paint_header(buffer)
         paint_footer(buffer)
         children.each { |child| child.paint(buffer, @resources) }
-        buffer
+        @page_buffers << buffer
+        @page_links << @resources.take_links
       end
 
       @contents = serialize
@@ -342,6 +347,23 @@ module Bandoola
       nil
     end
 
+    # The span element: an inline run of text. Consecutive spans flow together
+    # as one paragraph, wrapping across span boundaries, so each can carry its
+    # own font, weight, size and color:
+    #
+    #   div { span { "This is " } span(class: "font-bold") { "cool" } }
+    def span(**attributes)
+      content = block_given? ? yield.to_s : ""
+      inline(Span.new(Style.parse(attributes[:class]), content))
+    end
+
+    # The a element: inline text like span that links to +href+ (a URI) when
+    # clicked. It isn't styled by default; add e.g. "underline text-blue-800".
+    def a(href:, **attributes)
+      content = block_given? ? yield.to_s : ""
+      inline(A.new(Style.parse(attributes[:class]), content, href.to_s))
+    end
+
     # The image element. +src+ is a path to an SVG or JPEG. Sizing follows the
     # width/height classes (see Style); with none it uses the image's own size.
     def img(src:, **attributes)
@@ -349,6 +371,15 @@ module Bandoola
       nil
     end
 
+    # Add an inline element to the current parent's trailing run of inline
+    # text, starting a new run if the previous sibling isn't one.
+    def inline(element)
+      siblings = @stack.last.children
+      siblings << InlineRun.new unless siblings.last.is_a?(InlineRun)
+      siblings.last.children << element
+      nil
+    end
+
     # Add +element+ to the current parent, and — if a block is given — make
     # it the parent while the block runs so nested tags land inside it.
     def append(element, &block)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bandoola
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Johan Halse
@@ -37,6 +37,7 @@ files:
 - lib/bandoola/view/element.rb
 - lib/bandoola/view/file.rb
 - lib/bandoola/view/header.rb
+- lib/bandoola/view/inline.rb
 - lib/bandoola/view/resources.rb
 - lib/bandoola/view/style.rb
 - lib/bandoola/view/style/borders.rb
@@ -67,7 +68,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.15
+rubygems_version: 4.0.21
 specification_version: 4
 summary: A small, dependency-free PDF generator for Ruby with Tailwind-style classes.
 test_files: []