From 77b2debb1b3c39f009582751d068caa36b1de5cf Mon Sep 17 00:00:00 2001 From: Marco Rieser Date: Fri, 17 Jul 2026 15:02:09 +0200 Subject: [PATCH 1/3] Write docs for the spaceless tag --- content/collections/tags/spaceless.md | 92 +++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 content/collections/tags/spaceless.md diff --git a/content/collections/tags/spaceless.md b/content/collections/tags/spaceless.md new file mode 100644 index 000000000..e4be53936 --- /dev/null +++ b/content/collections/tags/spaceless.md @@ -0,0 +1,92 @@ +--- +title: Spaceless +id: 770a2167-bdb1-4c37-944e-af21a8a9343d +description: 'Strips the invisible gaps between HTML tags that your formatter keeps sneaking into your templates.' +intro: 'You formatted your Antlers nicely, and now there''s a mystery gap between two buttons that no amount of margin-hunting will explain. The `spaceless` tag hunts down whitespace between tags and removes it, without touching your actual words.' +--- +## Overview + +Prettier (and friends) love reformatting your Antlers templates with generous indentation and line breaks. Browsers do not share this love: multiple whitespace characters between inline elements collapse into a single visible space in the rendered page. Put two `inline-block` buttons on separate lines, and you get an ugly gap between them that isn't margin, isn't padding, and isn't your fault. It's a stray `\n`, dressed up as a space. + +The `spaceless` tag strips whitespace-only gaps between tags in its rendered content, so your formatter can indent however it wants without leaving fingerprints in the DOM. + +::tabs +::tab antlers +```antlers +{{ spaceless }} + +{{ /spaceless }} +``` +::tab blade +```blade + + + +``` +:: + +```html + +``` + +## What it actually does + +- Removes whitespace that sits directly between two tags (`> <` becomes `><`). +- Collapses whitespace _within_ text nodes down to a single space, rather than deleting it, so `Hello\nWorld` stays `Hello World` instead of becoming `HelloWorld`. +- Leaves the contents of ` + +``` + +`spaceless` tightens up the `div`'s edges but leaves the script's own formatting exactly as written: + +::tabs +::tab antlers +```antlers +{{ spaceless }} +
+ +
+{{ /spaceless }} +``` +::tab blade +```blade + +
+ +
+
+``` +:: + +```html +
+``` + +## When to use it + +It's best suited to small, inline-heavy chunks where a stray space actually shows up on screen: buttons sitting side by side, badges, breadcrumb separators, nav items. It's not much use wrapped around a whole page body, where nobody's squinting at the gap between a `
` and a `
`. + +If you want tidy output without babysitting this tag everywhere, wrap just the fussy inline bits rather than reaching for it as a blanket fix for the whole template. From 9a02b187e8558b048cffa5791ad01b100c0ae89a Mon Sep 17 00:00:00 2001 From: Marco Rieser Date: Fri, 17 Jul 2026 17:21:32 +0200 Subject: [PATCH 2/3] Shorten --- content/collections/tags/spaceless.md | 59 +++------------------------ 1 file changed, 6 insertions(+), 53 deletions(-) diff --git a/content/collections/tags/spaceless.md b/content/collections/tags/spaceless.md index e4be53936..4e5101445 100644 --- a/content/collections/tags/spaceless.md +++ b/content/collections/tags/spaceless.md @@ -6,9 +6,7 @@ intro: 'You formatted your Antlers nicely, and now there''s a mystery gap betwee --- ## Overview -Prettier (and friends) love reformatting your Antlers templates with generous indentation and line breaks. Browsers do not share this love: multiple whitespace characters between inline elements collapse into a single visible space in the rendered page. Put two `inline-block` buttons on separate lines, and you get an ugly gap between them that isn't margin, isn't padding, and isn't your fault. It's a stray `\n`, dressed up as a space. - -The `spaceless` tag strips whitespace-only gaps between tags in its rendered content, so your formatter can indent however it wants without leaving fingerprints in the DOM. +Prettier loves indenting your templates. Browsers turn that indentation into a visible gap between inline elements. `spaceless` strips whitespace-only gaps between tags in its rendered content, so your formatter can do its thing without leaving fingerprints in the DOM. ::tabs ::tab antlers @@ -35,58 +33,13 @@ The `spaceless` tag strips whitespace-only gaps between tags in its rendered con
  • One
  • Two
``` -## What it actually does +## What it does - Removes whitespace that sits directly between two tags (`> <` becomes `><`). -- Collapses whitespace _within_ text nodes down to a single space, rather than deleting it, so `Hello\nWorld` stays `Hello World` instead of becoming `HelloWorld`. -- Leaves the contents of ` - -``` - -`spaceless` tightens up the `div`'s edges but leaves the script's own formatting exactly as written: - -::tabs -::tab antlers -```antlers -{{ spaceless }} -
- -
-{{ /spaceless }} -``` -::tab blade -```blade - -
- -
-
-``` -:: - -```html -
-``` +- Collapses whitespace within text down to a single space rather than deleting it, so `Hello\nWorld` stays `Hello World`. +- Leaves whitespace around an inline tag inside prose alone, so a link mid-sentence doesn't glue to its neighboring words. +- Leaves `