Styling, accessibility and RTL¶

Use styles.css for application styles and class_ for DOM classes. Inline style dictionaries accept snake_case CSS property names:

html.section(
    html.h2("Settings"),
    class_="card",
    style={"background_color": "#f3f7ef", "padding": "24px"},
)

String values follow browser CSS units. Custom properties keep their --name. Python component prop names are preserved; DOM prop names are normalized to React's conventions.

Right-to-left interfaces¶

Set document language/direction in forge.json:

{"entry":"app:App","lang":"fa","direction":"rtl","title":"رابط پایتونی"}

Use CSS logical properties such as margin-inline-start, padding-inline and text-align: start so spacing follows direction. Give inline code, URLs and numeric inputs an explicit direction when needed. dir="auto" and <bdi> can help mixed-language content.

The framework exposes native direction attributes; it does not automatically correct Persian typography, bidirectional content or every third-party widget.

Accessibility basics¶

Associate a visible label with each input. Generate repeated component IDs with use_id. Choose semantic buttons/links, meaningful accessible names, keyboard focus styles and readable contrast. aria_label becomes aria-label.

React attributes alone do not establish accessibility: test keyboard navigation and screen-reader output for your actual app. SVG elements are available through svg, including props such as view_box and stroke_width.