Docs content align (#700)

* Docs for content-align, some bug fixes for it too

* Make the example output a little clearer

* Remove app.run() from content-align docs example

* Improve wording

* Move content-align and scrollbar-gutter docs exmaples to split css/py files

* Remove app.run() from scrollbar-gutter docs example

docs/examples/styles/content_align.css

@@ -0,0 +1,20 @@
+#box1 {
+    content-align: left top;
+    background: red;
+}
+
+#box2 {
+    content-align: center middle;
+    background: green;
+}
+
+#box3 {
+    content-align: right bottom;
+    background: blue;
+}
+
+Static {
+    height: 1fr;
+    padding: 1;
+    color: white;
+}

docs/examples/styles/content_align.py

@@ -0,0 +1,13 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class ContentAlignApp(App):
+    def compose(self):
+        yield Static("With [i]content-align[/] you can...", id="box1")
+        yield Static("...[b]Easily align content[/]...", id="box2")
+        yield Static("...Horizontally [i]and[/] vertically!", id="box3")
+
+
+app = ContentAlignApp(css_path="content_align.css")
+app.run()

docs/examples/styles/scrollbar_gutter.css

@@ -0,0 +1,8 @@
+Screen {
+    scrollbar-gutter: stable;
+}
+
+#text-box {
+    color: floralwhite;
+    background: darkmagenta;
+}

docs/examples/styles/scrollbar_gutter.py

@@ -11,18 +11,8 @@ Where the fear has gone there will be nothing. Only I will remain."""
 
 
 class ScrollbarGutterApp(App):
-    CSS = """
-    Screen {
-        scrollbar-gutter: stable;
-    }
-    Static {
-        color: floralwhite;
-        background: darkmagenta;
-    }
-    """
-
     def compose(self):
-        yield Static(TEXT)
+        yield Static(TEXT, id="text-box")
 
 
-app = ScrollbarGutterApp()
+app = ScrollbarGutterApp(css_path="scrollbar_gutter.css")

docs/styles/border.md

@@ -3,7 +3,7 @@
 The `border` rule enables the drawing of a box around a widget. A border is set with a border value (see below) followed by a color.
 
 | Border value | Explanation                                             |
-| ------------ | ------------------------------------------------------- |
+| ------------ |---------------------------------------------------------|
 | `"ascii"`    | A border with plus, hyphen, and vertical bar            |
 | `"blank"`    | A blank border (reserves space for a border)            |
 | `"dashed"`   | Dashed line border                                      |

docs/styles/content_align.md

@@ -0,0 +1,65 @@
+# Content-align
+
+The `content-align` property allows you to align content _inside_ a widget.
+
+You can specify the alignment of content on both the horizontal and vertical axes.
+
+## Syntax
+
+```
+content-align: <HORIZONTAL> <VERTICAL>;
+```
+
+### Values
+
+#### `HORIZONTAL`
+
+| Value            | Description                                        |
+|------------------|----------------------------------------------------|
+| `left` (default) | Align content on the left of the horizontal axis   |
+| `center`         | Align content in the center of the horizontal axis |
+| `right`          | Align content on the right of the horizontal axis  |
+
+#### `VERTICAL`
+
+| Value           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `top` (default) | Align content at the top of the vertical axis    |
+| `middle`        | Align content in the middle of the vertical axis |
+| `bottom`        | Align content at the bottom of the vertical axis |
+
+## Example
+
+=== "content_align.py"
+
+    ```python
+    --8<-- "docs/examples/styles/content_align.py"
+    ```
+
+=== "content_align.css"
+
+    ```scss
+    --8<-- "docs/examples/styles/content_align.css"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/content_align.py"}
+    ```
+
+## CSS
+
+```sass
+/* Align content in the very center of a widget */
+content-align: center middle;
+/* Align content at the top right of a widget */
+content-align: right top;
+```
+
+## Python
+```python
+# Align content in the very center of a widget
+widget.styles.content_align = ("center", "middle")
+# Align content at the top right of a widget
+widget.styles.content_align = ("right", "top")
+```

docs/styles/scrollbar_gutter.md

@@ -1,4 +1,4 @@
-# Scrollbar gutter
+# Scrollbar-gutter
 
 The `scrollbar-gutter` rule allows authors to reserve space for the vertical scrollbar.
 
@@ -28,6 +28,12 @@ terminal window.
     --8<-- "docs/examples/styles/scrollbar_gutter.py"
     ```
 
+=== "scrollbar_gutter.css"
+
+    ```scss
+    --8<-- "docs/examples/styles/scrollbar_gutter.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/scrollbar_gutter.py"}

mkdocs.yml

@@ -15,6 +15,7 @@ nav:
     - "styles/border.md"
     - "styles/box_sizing.md"
     - "styles/color.md"
+    - "styles/content_align.md"
     - "styles/display.md"
     - "styles/min_height.md"
     - "styles/max_height.md"

src/textual/_segment_tools.py

@@ -188,6 +188,6 @@ def align_lines(
         get_line_length = Segment.get_line_length
         for line in lines:
             left_space = width - get_line_length(line)
-            yield [*line, Segment(" " * left_space, style)]
+            yield [Segment(" " * left_space, style), *line]
 
     yield from blank_lines(bottom_blank_lines)

src/textual/css/styles.py

@@ -762,7 +762,7 @@ class Styles(StylesBase):
             )
         elif has_rule("align_horizontal"):
             append_declaration("align-horizontal", self.align_horizontal)
-        elif has_rule("align_horizontal"):
+        elif has_rule("align_vertical"):
             append_declaration("align-vertical", self.align_vertical)
 
         if has_rule("content_align_horizontal") and has_rule("content_align_vertical"):
@@ -774,7 +774,7 @@ class Styles(StylesBase):
             append_declaration(
                 "content-align-horizontal", self.content_align_horizontal
             )
-        elif has_rule("content_align_horizontal"):
+        elif has_rule("content_align_vertical"):
             append_declaration("content-align-vertical", self.content_align_vertical)
 
         lines.sort()