Merge pull request #704 from Textualize/text-justify

`text-align` CSS support

docs/examples/styles/text_align.css

@@ -0,0 +1,24 @@
+#one {
+  text-align: left;
+  background: lightblue;
+
+}
+
+#two {
+  text-align: center;
+  background: indianred;
+}
+
+#three {
+  text-align: right;
+  background: palegreen;
+}
+
+#four {
+  text-align: justify;
+  background: palevioletred;
+}
+
+Static {
+  padding: 1;
+}

docs/examples/styles/text_align.py

@@ -0,0 +1,28 @@
+from __future__ import annotations
+
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+TEXT = (
+    "I must not fear. Fear is the mind-killer. Fear is the little-death that "
+    "brings total obliteration. I will face my fear. I will permit it to pass over "
+    "me and through me."
+)
+
+
+class TextAlign(App):
+    def compose(self) -> ComposeResult:
+        left = Static("[b]Left aligned[/]\n" + TEXT, id="one")
+        yield left
+
+        right = Static("[b]Center aligned[/]\n" + TEXT, id="two")
+        yield right
+
+        center = Static("[b]Right aligned[/]\n" + TEXT, id="three")
+        yield center
+
+        full = Static("[b]Justified[/]\n" + TEXT, id="four")
+        yield full
+
+
+app = TextAlign(css_path="text_align.css")

docs/styles/scrollbar.md

@@ -12,7 +12,7 @@ There are a number of rules to set the colors used in Textual scrollbars. You wo
 | `scrollbar-background-active` | Scrollbar background when the thumb is being dragged    |
 | `scrollbar-corner-color`      | The gap between the horizontal and vertical scrollbars  |
 
-## Example:
+## Syntax
 
 ```
 scrollbar-color: <COLOR>;

docs/styles/text_align.md

@@ -0,0 +1,57 @@
+# Text-align
+
+The `text-align` rule aligns text within a widget.
+
+## Syntax
+
+```
+text-align: [left|start|center|right|end|justify];
+```
+
+### Values
+
+| Value     | Description                      |
+|-----------|----------------------------------|
+| `left`    | Left aligns text in the widget   |
+| `start`   | Left aligns text in the widget   |
+| `center`  | Center aligns text in the widget |
+| `right`   | Right aligns text in the widget  |
+| `end`     | Right aligns text in the widget  |
+| `justify` | Justifies text in the widget     |
+
+## Example
+
+This example shows, from top to bottom: `left`, `center`, `right`, and `justify` text alignments.
+
+=== "text_align.py"
+
+    ```python
+    --8<-- "docs/examples/styles/text_align.py"
+    ```
+
+=== "text_align.css"
+
+    ```css
+    --8<-- "docs/examples/styles/text_align.css"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/text_align.py"}
+    ```
+
+## CSS
+
+```sass
+/* Set text in all Widgets to be right aligned */
+Widget {
+    text-align: right;
+}
+```
+
+## Python
+
+```python
+# Set text in the widget to be right aligned
+widget.styles.text_align = "right"
+```