Updated

Author: danielduberg

docs/src/content/docs/en/concepts/predicates.mdx

@@ -19,10 +19,10 @@ The following predicates evaluate the *structure* of a node.
 
 | Predicate | Arguments    | Description                                                                    |
 | --------- | ------------ | ------------------------------------------------------------------------------ |
-| `Height`  | `min`, `max` | True if the `node` is at a height of `[min..max]`.                             |
-| `Inner`   |              | True if the `node` is an inner node (i.e., can have children, `height > 0`).   |
-| `Leaf`    |              | True if the `node` is a leaf node (i.e., cannot have children, `height == 0`). |
-| `Offset`  | `min`, `max` | True if the `node`'s offset is in `[min..max]`.                                |
+| `Height`  | `min`, `max` | `node`'s height is in `[min..max]`.                                            |
+| `Inner`   |              | `node` is an inner node (i.e., can have children, `height > 0`).               |
+| `Leaf`    |              | `node` is a leaf node (i.e., cannot have children, `height == 0`).             |
+| `Offset`  | `min`, `max` | `node`'s offset is in `[min..max]`.                                            |
 
 Below you can find a binary tree diagram to illustrate when the different predicates return true. 
 
@@ -86,13 +86,17 @@ These predicates evaluate a node based on its position relative to a target node
 
 These predicates evaluate the physical intersection between a node and a given geometry.
 
+<div class="middle-align-table">
+
 | Predicate | Diagram | Arguments | Description |
 | --- | :---: | :---: | --- |
 | `Contains` | <svg width="80" height="50" viewBox="0 0 80 50" xmlns="http://www.w3.org/2000/svg"><circle cx="40" cy="25" r="22" fill="#3b82f6" fill-opacity="0.2" stroke="#3b82f6" stroke-width="2"/><circle cx="40" cy="25" r="10" fill="#ef4444" fill-opacity="0.2" stroke="#ef4444" stroke-width="2"/><text x="40" y="28" font-size="10" text-anchor="middle" fill="currentColor">G</text><text x="40" y="12" font-size="10" text-anchor="middle" fill="#3b82f6">N</text></svg> | `geometry` | True if the `node` contains the `geometry`. |
 | `Disjoint` | <svg width="80" height="50" viewBox="0 0 80 50" xmlns="http://www.w3.org/2000/svg"><circle cx="22" cy="25" r="15" fill="#3b82f6" fill-opacity="0.2" stroke="#3b82f6" stroke-width="2"/><circle cx="58" cy="25" r="15" fill="#ef4444" fill-opacity="0.2" stroke="#ef4444" stroke-width="2"/><text x="22" y="28" font-size="10" text-anchor="middle" fill="#3b82f6">N</text><text x="58" y="28" font-size="10" text-anchor="middle" fill="#ef4444">G</text></svg> | `geometry` | True if the `node` is disjoint from the `geometry`. |
 | `Intersects` | <svg width="80" height="50" viewBox="0 0 80 50" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="25" r="18" fill="#3b82f6" fill-opacity="0.2" stroke="#3b82f6" stroke-width="2"/><circle cx="50" cy="25" r="18" fill="#ef4444" fill-opacity="0.2" stroke="#ef4444" stroke-width="2"/><text x="23" y="28" font-size="10" text-anchor="middle" fill="#3b82f6">N</text><text x="57" y="28" font-size="10" text-anchor="middle" fill="#ef4444">G</text></svg> | `geometry` | True if the `node` intersects with the `geometry`. |
 | `Inside` | <svg width="80" height="50" viewBox="0 0 80 50" xmlns="http://www.w3.org/2000/svg"><circle cx="40" cy="25" r="22" fill="#ef4444" fill-opacity="0.2" stroke="#ef4444" stroke-width="2"/><circle cx="40" cy="25" r="10" fill="#3b82f6" fill-opacity="0.2" stroke="#3b82f6" stroke-width="2"/><text x="40" y="28" font-size="10" text-anchor="middle" fill="currentColor">N</text><text x="40" y="12" font-size="10" text-anchor="middle" fill="#ef4444">G</text></svg> | `geometry` | True if the `node` is inside the `geometry`. |
 
+</div>
+
 ### Coordinates
 
 | Predicate | Arguments | Description |

docs/src/styles/custom.css

@@ -7,4 +7,15 @@
 
 .katex-html svg {
 	height: inherit;
+}
+
+/* Force Mermaid containers and their SVGs to be transparent */
+.mermaid,
+.mermaid svg {
+	background-color: transparent !important;
+}
+
+/* Vertically center the contents of table data cells */
+.middle-align-table td {
+	vertical-align: middle;
 }