Help text for align, fix off-by-one in tokenizer error output

sandbox/uber.css

@@ -7,8 +7,7 @@
 
 .list-item {
   height: 8;
-  min-width: 80;
+  align: center middle;
   background: dark_blue;
-  padding: 2;
   border: solid red;
 }

sandbox/uber.py

@@ -81,7 +81,6 @@ class BasicApp(App):
 
     def action_toggle_border(self):
         self.focused.styles.border = [("solid", "red"), ("dashed", "white")]
-        self.focused.styles.opacity = "x"
 
 
 BasicApp.run(css_file="uber.css", log="textual.log", log_verbosity=1)

src/textual/css/_help_text.py

@@ -4,7 +4,13 @@ import sys
 from dataclasses import dataclass
 
 from textual.css._help_renderables import Example, Bullet, HelpText
-from textual.css.constants import VALID_BORDER, VALID_LAYOUT, VALID_EDGE
+from textual.css.constants import (
+    VALID_BORDER,
+    VALID_LAYOUT,
+    VALID_EDGE,
+    VALID_ALIGN_HORIZONTAL,
+    VALID_ALIGN_VERTICAL,
+)
 
 if sys.version_info >= (3, 8):
     from typing import Literal, Iterable
@@ -543,3 +549,29 @@ def fractional_property_help_text(
             ).get_by_context(context)
         ],
     )
+
+
+def align_help_text() -> HelpText:
+    return HelpText(
+        summary="Invalid value for [i]align[/] property",
+        bullets=[
+            Bullet(
+                markup="The [i]align[/] property expects exactly 2 values",
+                examples=[Example("align: <horizontal> <vertical>")],
+            ),
+            Bullet(
+                f"Valid values for <horizontal> are {friendly_list(VALID_ALIGN_HORIZONTAL)}"
+            ),
+            Bullet(
+                f"Valid values for <vertical> are {friendly_list(VALID_ALIGN_VERTICAL)}",
+                examples=[
+                    Example(
+                        "align: center middle;  [dim]# Center vertically & horizontally within parent"
+                    ),
+                    Example(
+                        "align: left middle;    [dim]# Align on the middle left of the parent"
+                    ),
+                ],
+            ),
+        ],
+    )

src/textual/css/_styles_builder.py

@@ -17,6 +17,7 @@ from ._help_text import (
     docks_property_help_text,
     dock_property_help_text,
     fractional_property_help_text,
+    align_help_text,
 )
 from .constants import (
     VALID_ALIGN_HORIZONTAL,
@@ -657,20 +658,20 @@ class StylesBuilder:
 
     def process_align(self, name: str, tokens: list[Token]) -> None:
         if len(tokens) != 2:
-            self.error(name, tokens[0], "expected two tokens")
+            self.error(name, tokens[0], align_help_text())
         token_horizontal = tokens[0]
         token_vertical = tokens[1]
         if token_horizontal.name != "token":
             self.error(
                 name,
                 token_horizontal,
-                f"invalid token {token_horizontal!r}, expected {friendly_list(VALID_ALIGN_HORIZONTAL)}",
+                align_help_text(),
             )
         if token_vertical.name != "token":
             self.error(
                 name,
                 token_vertical,
-                f"invalid token {token_vertical!r}, expected {friendly_list(VALID_ALIGN_VERTICAL)}",
+                align_help_text(),
             )
 
         self.styles._rules["align_horizontal"] = token_horizontal.value

src/textual/css/tokenizer.py

@@ -65,9 +65,11 @@ class TokenizeError(Exception):
         errors.append(Text(" Tokenizer error in stylesheet:", style="bold red"))
 
         errors.append(
-            highlighter(f" {self.path or '<unknown>'}:{self.line_no}:{self.col_no}")
+            highlighter(
+                f" {self.path or '<unknown>'}:{self.line_no + 1}:{self.col_no + 1}"
+            )
         )
-        errors.append(self._get_snippet(self.code, self.line_no))
+        errors.append(self._get_snippet(self.code, self.line_no + 1))
         final_message = ""
         for is_last, message_part in loop_last(message.split(";")):
             end = "" if is_last else "\n"