Fix docs examples that don't compile or mislead

docs/api-reference/barcodes.md

@@ -121,7 +121,7 @@ using ZXing.Rendering;
             var writer = new QRCodeWriter();
             var qrCode = writer.encode(url, BarcodeFormat.QR_CODE, (int)size.Width, (int)size.Height);
             var renderer = new SvgRenderer { FontName = "Lato" };
-            return renderer.Render(qrCode, BarcodeFormat.EAN_13, null).Content;
+            return renderer.Render(qrCode, BarcodeFormat.QR_CODE, null).Content;
         });
 });
 ```

docs/api-reference/border.md

@@ -31,11 +31,11 @@ container
 | **BorderTop**        | Sets a border on the top side of its content.              |
 | **BorderBottom**     | Sets a border on the bottom side of its content.           |
 
-Each method requires a thickness value as a parameter. Optionally, you can specify the unit value (default is `Unit.Points`).
+Each method requires a thickness value as a parameter. Optionally, you can specify the unit value (default is `Unit.Point`).
 
 ```csharp
 container.Border(1);
-container.Border(1, Unit.Millimeters);
+container.Border(1, Unit.Millimetre);
 ```
 
 <!--@include: tip-unit.md-->

docs/api-reference/column.md

@@ -53,10 +53,10 @@ container
 
 <br>
 
-Optionally, you can specify the unit value (default is `Unit.Points`).
+Optionally, you can specify the unit value (default is `Unit.Point`).
 
 ```csharp
-column.Spacing(5, Unit.Millimeters);
+column.Spacing(5, Unit.Millimetre);
 ```
 
 <!--@include: tip-unit.md--> 

docs/api-reference/debug-area.md

@@ -17,15 +17,15 @@ You can specify text and color to better distinguish between various debug eleme
 
 ```csharp{2}
 container
-    .Debug("Grid example", Colors.Blue.Medium)
+    .DebugArea("Grid example", Colors.Blue.Medium)
     // content
 ```
 
 It is also possible to skip the color (it is red by default), and even the label:
 
 ```csharp
-.Debug("Grid example")
-.Debug()
+.DebugArea("Grid example")
+.DebugArea()
 ```
 
 <!--@include: tip-color.md--> 
@@ -38,14 +38,21 @@ container
     .Height(250)
     .Padding(25)
     .DebugArea("Grid example", Colors.Blue.Medium)
-    .Grid(grid =>
+    .Column(column =>
     {
-        grid.Columns(3);
-        grid.Spacing(5);
-
-        foreach (var _ in Enumerable.Range(0, 8))
-            grid.Item().Height(50).Placeholder();
+        column.Spacing(5);
+
+        foreach (var _ in Enumerable.Range(0, 3))
+        {
+            column.Item().Row(row =>
+            {
+                row.Spacing(5);
+
+                foreach (var _ in Enumerable.Range(0, 3))
+                    row.RelativeItem().Height(50).Placeholder();
+            });
+        }
     });
 ```
 
-![example](/api-reference/debug-area.webp)
+![example](/api-reference/debug-area.webp)

docs/api-reference/image/basics.md

@@ -49,17 +49,25 @@ Therefore, the resolution of an image is not used for determining its physical s
 #### Example
 
 ```csharp{8-11}
-.Grid(grid =>
+.Column(column =>
 {
-    grid.Columns(2);
-    grid.Spacing(10);
-
-    grid.Item(2).Text("My photo gallery:").Bold();
-
-    grid.Item().Image("photo-gallery-1.jpg");
-    grid.Item().Image("photo-gallery-2.jpg");
-    grid.Item().Image("photo-gallery-3.jpg");
-    grid.Item().Image("photo-gallery-4.jpg");
+    column.Spacing(10);
+
+    column.Item().Text("My photo gallery:").Bold();
+
+    column.Item().Row(row =>
+    {
+        row.Spacing(10);
+        row.RelativeItem().Image("photo-gallery-1.jpg");
+        row.RelativeItem().Image("photo-gallery-2.jpg");
+    });
+
+    column.Item().Row(row =>
+    {
+        row.Spacing(10);
+        row.RelativeItem().Image("photo-gallery-3.jpg");
+        row.RelativeItem().Image("photo-gallery-4.jpg");
+    });
 });
 ```
 

docs/api-reference/image/svg.md

@@ -38,7 +38,7 @@ The same setting is also available via the GUI in your preferred IDE.
 :::
 
 :::tip
-SVG content supports the same scaling options as raster images. [Learn more](/api-reference/image/basics.html#image-scaling)
+SVG content supports the `FitWidth`, `FitHeight` and `FitArea` scaling options and always keeps its aspect ratio. `FitUnproportionally` is available only for raster images. [Learn more](/api-reference/image/basics.html#image-scaling)
 
 For example:
 ```csharp{4}
@@ -111,3 +111,6 @@ If an SVG file does not render as expected after considering the following point
 
 Learn more on [the Shopify page](https://shopify.github.io/react-native-skia/docs/images-svg/#svg-support).
 
+::: warning
+QuestPDF uses transparent colors written as `#AARRGGBB`, while SVG expects `#RRGGBBAA`.
+:::

docs/api-reference/layers.md

@@ -3,7 +3,7 @@
 The Layers element adds content either underneath (as a background) or on top of (as a watermark) the main content.
 
 The main layer supports paging, can span multiple pages, and determines the container's target length.
-Additional layers can also span multiple pages and are repeated on each one.
+Additional layers can also span multiple pages: like the main layer, a long layer continues on the next page, but it is not repeated on each one. For content on every page, such as a watermark, use the page's [Background or Foreground slot](/api-reference/page/slots).
 
 | Method           | Description                                      |
 |------------------|--------------------------------------------------|

docs/api-reference/page/settings.md

@@ -36,7 +36,7 @@ document.Page(page =>
 {
     page.Size(595, 842); // in points
     // or
-    page.Size(21, 29.7f, Unit.Centimeter);
+    page.Size(21, 29.7f, Unit.Centimetre);
     // or
     page.Size(PageSizes.A4);
 });
@@ -53,7 +53,7 @@ document.Page(page =>
 {
     page.ContinuousSize(215);
     // or
-    page.ContinuousSize(76, Unit.Millimeter);
+    page.ContinuousSize(76, Unit.Millimetre);
 });
 ```
 
@@ -116,7 +116,7 @@ You can configure each side individually or use combined methods for convenience
 document.Page(page =>
 {
     page.MarginVertical(32);
-    page.MarginHorizontal(2, Unit.Centimeter);
+    page.MarginHorizontal(2, Unit.Centimetre);
 });
 ```
 
@@ -173,7 +173,7 @@ Document
         document.Page(page =>
         {
             page.Size(PageSizes.A5.Landscape());
-            page.Margin(2f, Unit.Centimeter);
+            page.Margin(2f, Unit.Centimetre);
 
             page.Content().AlignCenter().AlignMiddle().Text("A5 LANDSCAPE");
         });

docs/api-reference/rotate.md

@@ -4,10 +4,10 @@
 
 Constrained rotation enables you to rotate an element by exactly 90 degrees, either clockwise or counterclockwise, while maintaining the content within the same space and size constraints.
 
-| Method                     | Description                                      |
-|----------------------------|--------------------------------------------------|
-| **RotateCounterclockwise** | Rotates its content 90 degrees counterclockwise. |
-| **RotateClockwise**        | Rotates its content 90 degrees clockwise.        |
+| Method                           | Description                                      |
+|----------------------------------|--------------------------------------------------|
+| **RotateLayoutCounterclockwise** | Rotates its content 90 degrees counterclockwise. |
+| **RotateLayoutClockwise**        | Rotates its content 90 degrees clockwise.        |
 
 ::: warning
 When applying rotation, be aware that it changes the dimensional behavior of your elements. 
@@ -19,7 +19,7 @@ This affects how other properties like alignment and padding work on the rotated
 container.Row(row =>
 {
     row.AutoItem()
-        .RotateCounterclockwise()
+        .RotateLayoutCounterclockwise()
         .AlignCenter()
         .Text("Definition")
         .Bold().FontColor(Colors.Blue.Darken2);

docs/api-reference/row.md

@@ -22,7 +22,7 @@ the items will occupy sizes of 15 points, 75 points, and 10 points respectively.
 | **RelativeItem** | Adds a new item to the row element. This item occupies space proportionally to other relative items.                                                                                                                                                                                                               |
 | **AutoItem**     | Adds a new item to the row element. It requests as much horizontal space as its content requires. **Warning**: It doesn't adjust its size based on other items and may frequently result in layout exceptions. It is recommended to use this API in conjunction with the [MaxWidth](/api-reference/width) element. |
 
-For ConstantItem, you can optionally specify the unit value (default is `Unit.Points`).
+For ConstantItem, you can optionally specify the unit value (default is `Unit.Point`).
 
 ```csharp
 row.ConstantItem(5, Unit.Centimetre);
@@ -85,10 +85,10 @@ container
 
 <br>
 
-Optionally, you can specify the unit value (default is `Unit.Points`).
+Optionally, you can specify the unit value (default is `Unit.Point`).
 
 ```csharp
-row.Spacing(5, Unit.Millimeters);
+row.Spacing(5, Unit.Millimetre);
 ```
 
 <!--@include: tip-unit.md--> 

docs/api-reference/shadow.md

@@ -23,7 +23,7 @@ container
 
 ## Blur
 
-Gets or sets the blur radius of the shadow in pixels.
+Gets or sets the blur radius of the shadow in points.
 Higher values produce a more diffused shadow with softer edges.
 
 A value of 0 results in a sharp, unblurred shadow.
@@ -57,7 +57,7 @@ Use with caution, especially in large documents or when rendering complex shadow
 
 ## Spread
 
-Gets or sets the spread radius of the shadow in pixels.
+Gets or sets the spread radius of the shadow in points.
 
 Positive values cause the shadow to expand, negative values cause it to contract.
 
@@ -86,7 +86,7 @@ Positive values cause the shadow to expand, negative values cause it to contract
 
 ## Offset X
 
-Gets or sets the horizontal offset of the shadow in pixels.
+Gets or sets the horizontal offset of the shadow in points.
 
 Positive values move the shadow to the right, negative values move it to the left.
 
@@ -115,7 +115,7 @@ Positive values move the shadow to the right, negative values move it to the lef
 
 ## Offset Y
 
-Gets or sets the vertical offset of the shadow in pixels.
+Gets or sets the vertical offset of the shadow in points.
 
 Positive values move the shadow downward, negative values move it upward.
 

docs/api-reference/table/basics.md

@@ -116,7 +116,7 @@ Here’s an example showcasing a confusion matrix layout where cells are placed
         .Text("Predicted condition").Bold();
 
     table.Cell().Row(3).Column(1).RowSpan(2)
-        .Element(HeaderCellStyle).RotateLeft()
+        .Element(HeaderCellStyle).RotateLayoutCounterclockwise()
         .Text("Actual\ncondition").Bold().AlignCenter();
 
     table.Cell().Row(2).Column(3)

docs/api-reference/table/header-and-footer.md

@@ -21,7 +21,7 @@ const int inchesToPoints = 72;
 
 container
     .Padding(10)
-    .MinimalBox()
+    .Shrink()
     .Border(1)
     .Table(table =>
     {
@@ -72,12 +72,12 @@ container
             table.Cell().Element(CellStyle).ExtendHorizontal().AlignLeft().Text(page.name);
 
             // inches
-            table.Cell().Element(CellStyle).Text(page.width);
-            table.Cell().Element(CellStyle).Text(page.height);
+            table.Cell().Element(CellStyle).Text($"{page.width}");
+            table.Cell().Element(CellStyle).Text($"{page.height}");
 
             // points
-            table.Cell().Element(CellStyle).Text(page.width * inchesToPoints);
-            table.Cell().Element(CellStyle).Text(page.height * inchesToPoints);
+            table.Cell().Element(CellStyle).Text($"{page.width * inchesToPoints}");
+            table.Cell().Element(CellStyle).Text($"{page.height * inchesToPoints}");
 
             IContainer CellStyle(IContainer container) => DefaultCellStyle(container, Colors.White).ShowOnce(); 
         }

docs/api-reference/text/basics.md

@@ -139,5 +139,5 @@ Hyperlink is a clickable text that redirects the user to a specific webpage.
 ```
 
 <object data="/api-reference/text-hyperlink.pdf" type="application/pdf" class="pdf-viewer">
-  <p>Unable to display PDF file. <a href="/api-reference/document-merge-continuous.pdf">Download</a> instead.</p>
+  <p>Unable to display PDF file. <a href="/api-reference/text-hyperlink.pdf">Download</a> instead.</p>
 </object>

docs/api-reference/text/style-inheritance.md

@@ -51,7 +51,7 @@ It reduces repetitive code, enhances maintainability, and provides flexibility t
                 table.Cell().Element(Style).Text(Placeholders.Sentence());
             }
 
-            IContainer Style(IContainer container) => container.container.Padding(5);
+            IContainer Style(IContainer container) => container.Padding(5);
         });
 });
 ```

docs/api-reference/text/text-style.md

@@ -32,7 +32,7 @@ It's worth noting that different fonts may render text with different visual siz
 
 A font family is a collection of related fonts that share a consistent design style but may vary in weight, style, or width.
 
-Examples of font families include Arial, Times New Roman, and Calibri.
+Examples of font families include Lato, Noto Serif and JetBrains Mono. Fonts other than the built-in Lato must be available to your application, see [font management](/api-reference/text/font-management).
 
 ```csharp{8,11}
 .Column(column =>
@@ -41,11 +41,11 @@ Examples of font families include Arial, Times New Roman, and Calibri.
 
     column.Item().Text("This is text with default font (Lato)");
 
-    column.Item().Text("This is text with Times New Roman font")
-        .FontFamily("Times New Roman");
+    column.Item().Text("This is text with Noto Serif font")
+        .FontFamily("Noto Serif");
 
-    column.Item().Text("This is text with Courier New font")
-        .FontFamily("Courier New");
+    column.Item().Text("This is text with JetBrains Mono font")
+        .FontFamily("JetBrains Mono");
 });
 ```
 
@@ -470,7 +470,7 @@ Allows a line to break between any two characters, not only at word boundaries s
 
 With this setting enabled, lines are filled as fully as possible, at the cost of splitting words at arbitrary positions without hyphenation.
 
-It is useful for content without natural break points, such as long URLs, identifiers, hashes, or file paths, especially in narrow columns. For regular prose, prefer the default behavior.
+Without this setting, a word longer than the line is still split where it overflows, so no text is cut off. `BreakAnywhere` changes where lines break: they are filled completely instead of breaking early at natural break points such as `/` or `-`. Use it when evenly filled lines matter more than readable breaks, e.g. hashes or identifiers in narrow columns; for prose and URLs the default is usually easier to read.
 
 ```csharp
 .Column(column =>

docs/concepts/code-patterns/components.md

@@ -157,7 +157,7 @@ public class SectionComponent : IComponent
 
     public IContainer Custom(string label)
     {
-        var content = IContainer.Empty;
+        var content = EmptyContainer.Create();
         Fields.Add((label, content));
         return content;
     }
@@ -187,7 +187,7 @@ Document
                     // more usages of the section component
                 });
         });
-    }
+    })
     .GeneratePdf("report.pdf");
 
 IComponent BuildSampleSection()