add hspace-* horizontal offset utilities, document in README

2 files changed, 25 insertions, 0 deletions

diff --git a/README b/README
index 44922b5..28e1567 100644
--- a/README
+++ b/README
@@ -123,6 +123,14 @@ def hello(name):
 <div style="height: 15em"></div>      <!-- custom sizes: use this instead (consecutive vspace divs don't stack - margins collapse) -->
 ```
 
+### Horizontal Offset
+```html
+<span class="hspace-large">indented text</span>  <!-- inline: shifts this fragment right on the line -->
+<div class="hspace-large">indented block</div>    <!-- block: indents the whole line/block -->
+<span style="padding-left: 8em">custom</span>     <!-- custom offsets: use this inline -->
+<!-- classes: tiny 0.5em, small 1em, medium 2em, large 3em, xlarge 4em, xxlarge 5em, hspace-6..10 (em). Replaces fragile &nbsp; runs. -->
+```
+
 ## Themes
 
 ## Customization
diff --git a/acarp.css b/acarp.css
index 2a14e4a..a292f90 100644
--- a/acarp.css
+++ b/acarp.css
@@ -329,6 +329,23 @@ section .math {
 .vspace-9 { margin-top: 9em !important; }
 .vspace-10 { margin-top: 10em !important; }
 
+/* Horizontal offset utilities - add left padding.
+   Works on inline spans (offset within a line) and block wrappers
+   (indents the whole block). Cleaner than runs of &nbsp;.
+   For custom offsets, use an inline-padded element instead:
+     <span style="padding-left: 8em">text</span> */
+.hspace-tiny { padding-left: 0.5em !important; }
+.hspace-small { padding-left: 1em !important; }
+.hspace-medium { padding-left: 2em !important; }
+.hspace-large { padding-left: 3em !important; }
+.hspace-xlarge { padding-left: 4em !important; }
+.hspace-xxlarge { padding-left: 5em !important; }
+.hspace-6 { padding-left: 6em !important; }
+.hspace-7 { padding-left: 7em !important; }
+.hspace-8 { padding-left: 8em !important; }
+.hspace-9 { padding-left: 9em !important; }
+.hspace-10 { padding-left: 10em !important; }
+
 
 /* General spacing utilities */
 .push-down { margin-bottom: 1.5em !important; }