diff --git a/README.md b/README.md index 82c47a8..8aee4a4 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,10 @@ - **Per-App Styling**: Unique notification styles for different applications - **Modern Design**: Clean, minimalist approach to desktop notifications +## :rocket: Getting Started + +The best way to get started with **Noti** is the [book](https://noti-rs.github.io/notibook). + ## :inbox_tray: Installation ### 1. Install via Cargo (Recommended) @@ -37,19 +41,6 @@ cargo build --release cargo install --path . ``` -## :rocket: Running Noti - -### Manual Startup - -```bash -# Start Noti daemon -noti run -``` - -### Automatic Startup - -For detailed instructions on setting up automatic startup with `systemd`, please refer to the [Autostart Guide](docs/Autostart.md). - ## :hammer_and_wrench: Configuration Noti uses a TOML configuration file located at: @@ -124,14 +115,14 @@ line_spacing = 5 ``` > [!TIP] -> Check [ConfigProperties.md](docs/ConfigProperties.md) for comprehensive configuration options! +> Check the [book](https://noti-rs.github.io/notibook) for comprehensive configuration guide! ### :wrench: Custom layout -Want to change the banner layout? The `Noti` application provide **custom** layout by -our new brand file type `noti` with extension `.noti`! +Want to change the banner layout? +The `Noti` application offers a customizable layout using our file format, `.noti`! -**Sample of layout configuration**: +Example of layout configuration: ```noti FlexContainer( @@ -173,7 +164,7 @@ write: display.layout = "path/to/your/File.noti" ``` -Read more about it [here](./docs/Filetype.md)! +Read more about it [here](https://noti-rs.github.io/notibook/CustomLayout.html)! ## :bug: Troubleshooting diff --git a/docs/Autostart.md b/docs/Autostart.md deleted file mode 100644 index 1bbfe63..0000000 --- a/docs/Autostart.md +++ /dev/null @@ -1,93 +0,0 @@ -# Autostarting Noti with Systemd and D-Bus - -This guide will help you configure autostart `Noti` using `systemd` user services and `D-Bus` activation. - -> [!WARNING] -> Specific configurations might vary slightly depending on your distribution and desktop setup. - -## Understanding Environment Variables - -| Variable | Default Path | Description | -| ------------------ | ---------------- | ------------------------------------- | -| `$XDG_DATA_HOME` | `~/.local/share` | User-specific data directory | -| `$XDG_CONFIG_HOME` | `~/.config` | User-specific configuration directory | - -## Step 1: D-Bus Service Configuration - -Create a `D-Bus service` to define how application should be launched: - -- Create a new file at `$XDG_DATA_HOME/dbus-1/services/org.freedesktop.Notifications.service` -- Add the following: - -```ini -[D-Bus Service] -Name=org.freedesktop.Notifications -Exec=%h/.cargo/bin/noti run -SystemdService=noti.service -``` - -## Step 2: Systemd User Service Configuration - -Create a `systemd unit` to manage application's lifecycle: - -- Create a new file at `$XDG_CONFIG_HOME/systemd/user/noti.service` -- Add the following: - -```ini -[Unit] -Description=Noti Application -PartOf=graphical-session.target -After=graphical-session.target - -[Service] -Type=dbus -BusName=org.freedesktop.Notifications -Environment=XDG_CONFIG_HOME=%h/.config -Environment=NOTI_LOG=info -ExecStart=%h/.cargo/bin/noti run -Restart=always - -[Install] -WantedBy=default.target -``` - -### Unit Configuration Breakdown - -| Configuration | Purpose | -| --------------------------------- | --------------------------------------------------------- | -| `PartOf=graphical-session.target` | Ensures the service is managed with the graphical session | -| `Type=dbus` | Enables D-Bus activation | -| `Restart=always` | Automatically restarts on failure | -| `WantedBy=default.target` | Enables autostart at user login | - -## Step 3: Enable and Start the Service - -```bash -# Reload systemd user configuration -systemctl --user daemon-reload - -# Enable service to start on boot -systemctl --user enable noti.service - -# Start service immediately -systemctl --user start noti.service -``` - -## Troubleshooting - -### Checking Service Status - -```bash -# View service status -systemctl --user status noti - -# Follow live service logs -journalctl --user --unit noti --follow -``` - -### Common Issues - -- Ensure the executable path is correct -- Check file permissions -- Verify `D-Bus` and `systemd` configurations -- Confirm environment variables are set correctly diff --git a/docs/ConfigProperties.md b/docs/ConfigProperties.md deleted file mode 100644 index 8827121..0000000 --- a/docs/ConfigProperties.md +++ /dev/null @@ -1,459 +0,0 @@ -# Config Properties - -The Noti application have a way to be configured by TOML config file which placed -at specific position. Here a priority of positions: - -1. `$XDG_CONFIG_HOME/noti/config.toml` -2. `$HOME/.config/noti/config.toml` - -Use this file as the specification of configuration properties. - -> [!NOTE] -> Don't need to reload the application after changing config properties because it have -> `hot-reload` or `watch-mode`. - -## Types - -Before of all properties, need to understand a few primitive type. The complex types like array or table will be explained in place. - -| Type | Description | -| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `bool` | A boolean value | -| `u8` | An unsigned integer of 8 bit | -| `u16` | An unsigned integer of 16 bit | -| `String` | A string. Usually it used as enumeration | -| `[..]` | Array containing various type. Used as tuple | -| `Color` | The hex value which is started by hashtag (#) and wrapped by doubled quotes (defines as string). It can have three, six or eight symbols which represent RGB (including alpha-channel in 8-symboled hex as opacity). | -| `Path` | The path to particular file or directory, represented as string (surrounded by double quotes). Currently supported expansion by environment variable, tilde, glob (asterisks) and the relative paths. | - -## Importing - -You can move part of configuration values into other files and import them in -main configuration files by keyword `use` and accepts array of `Path`s. Accepts -any valid path, including path that contains environment variables, -starting with tilde, containing glob (asterisks). - -The syntax: - -```toml -use = [ - "$XDG_CONFIG_HOME/noti/other_cfg_file.toml", - "~/.config/noti/special_cfg_file.toml", - "/home/bebra/.config/super-sepcial-file.toml", - - # The relative path also are supported - "./apps/Spotify.toml", - "apps/Spotify.toml", -] -``` - -> [!TIP] -> Importing the same file more than one time is discouraged and, please, avoid -> this. - -### Config priority - -Main thought - current configuration file is more prioritized than imported config file. - -So, if the same configuration properties declares twice - in current configuration file and -in imported file, the application will pick the value from the **current** configuration file. - -And, please, avoid any ambiguity in configuration files. The application will try to merge -these configuration values, but the `Noti` developers won't guarantee that it will work in -that way as you expected. Instead of this, we recommend declare whole thing in one place -and import it. For example, you can declare [themes](#themes) in other files and import them -into main config file. - ---- - -## Property groups - -There is four groups of properties: - -- [General](#general) -- [Display](#display) -- [Themes](#themes) -- [Apps](#apps) - -Each of them belongs to specific idea. So the reading order is not matter. But we recommend you -to go to through from the first one to the last one. - ---- - -## General - -The 'general' word means that it applies to application or all banners together. Here a table of possible general properties and below we'll go through all properties. - -| Property name | Description | Type | Default value | -| :--------------- | :-------------------------------------------------- | :-------------------- | :-----------: | -| `font` | [See desc](#font) | `String` | "Noto Sans" | -| `width` | The width of banner frame. | `u16` | 300 | -| `height` | The height of banner frame. | `u16` | 150 | -| `anchor` | [See desc](#anchor) | `String` | "top right" | -| `gap` | The space size between two banners. Measures in px. | `u8` | 10 | -| `offset` | [See desc](#offset) | `[u8, u8]` | [0, 0] | -| `sorting` | [See desc](#sorting) | `String` or `Sorting` | "default" | -| `idle_threshold` | [See desc](#idle-threshold) | `String` | "5 sec" | - -### Font - -Accepts the font name. It can be separated or not by spaces. The application can use only the font -name which can be used as pattern in `fc-list` command. So you can't use already styled font like -"Noto Sans Bold". But the application internally can load font with needed styles if it is possible. - -### Anchor - -The anchor of current monitor for current window instance. It means where you want to see appearing -notification banners. The possible values: - -- `"top"` -- `"top-left"` or `"top left"` -- `"top-right"` or `"top right"` -- `"left"` -- `"right"` -- `"bottom"` -- `"bottom-left"` or `"bottom left"` -- `"bottom-right"` or `"bottom right"` - -### Offset - -The offset from edges for window instance. The first value is the offset -by x-axis, the second value - by y-axis. - -For example, you picked `"bottom-left"` anchor and `[5, 10]` offset and -it means that the window instance will be placed at bottom-left edge of a -current monitor with offsets by 5 from left edge and by 10 from bottom edge. - -### Sorting - -The property which set rule of banner sorting. It's very helpful when you -want to place banner with critical urgency at top or bottom. - -You can define only a string and the sorting always will be ascending. But -when you want to sort in descending, you have to define a table: - -| Property name | Type | Default value | -| :------------ | :------- | :-----------: | -| by | `String` | "default" | -| ordering | `String` | "ascending" | - -Possible values of the `by` property name: - -- "default" (alias to "time") -- "time" -- "id" (means the notification id, simple to "time", but in replacement case - it stays in old place) -- "urgency" - -Possible values of the `ordering` property name: - -- "ascending" (also possible short name "asc") -- "descending" (also possible short name "desc") - -### Idle Threshold - -When `idle_threshold` is set, notifications will not be removed or expired while the user is idle beyond the configured threshold. Once the user is active again, the timeout resumes. -This setting accepts a human-readable duration format (e.g., `"15 minutes"`, `"30s"`). -If set to `"none"`, the idle timeout behavior is disabled. - -> [!WARNING] -> Changes to the `idle_threshold` setting cannot be applied via hot-reload. To apply a new value, a full restart of the application is required. - ---- - -## Display - -To change the visual styles of banners use `display` table. You cad define -the values of `display` table for all the applications at the same time and -use specific values per application by [app config](#apps). - -If you curious about banner layout, please visit [the other document](#BannerLayout.md) -that was made specifically for it. - -The display properties affects only and only for a banner, not the window entire. -The currently possible properties of `display` table: - -| Property name | Description | Type | Default value | -| :----------------------------- | :-------------------------------------------------- | :---------------------------------------------------------------------- | :-----------: | -| [layout](./Filetype.md) | Use the custom layout by providen path | `Path` | "default" | -| [theme](#themes) | Use the [theme](#themes) by name | `String` | - | -| [image](#image) | Image properties | `Image` | - | -| [padding](#padding-and-margin) | The spacing from the banner's edge to inner content | `u8` or `[u8, u8]` or `[u8, u8, u8]` or `[u8, u8, u8, u8]` or `Spacing` | 0 | -| [border](#border) | Border properties | `Border` | - | -| [text](#text) | Text properties (alias for `title` and `body`) | `Text` | - | -| [title](#text) | Title text properties | `Text` | - | -| [body](#text) | Body text properties | `Text` | - | -| [markup](#markup) | Enables HTML style markup | `bool` | true | -| [timeout](#timeout) | Sets the timeout of banner | `u16` or `Timeout` | 0 | - -The [layout](./Filetype.md) property should have or `"default"` value or path to file in which -describes layout for banner. You can pass path with environment variables like -`"$XDG_CONFIG_HOME/noti/File.noti"` or use tilde - `"~/.config/noti/File.noti`. - -The `Spacing` table: - -| Key | Short description | Type | -| :--------- | :-------------------------------------------------------------------------- | :--- | -| top | Spacing from top | `u8` | -| right | Spacing from right | `u8` | -| bottom | Spacing from bottom | `u8` | -| left | Spacing from left | `u8` | -| vertical | Spacing from top and bottom together (incompatible with top or bottom keys) | `u8` | -| horizontal | Spacing from left and right together (incompatible with left or right keys) | `u8` | - -### Padding and margin - -Within scope of this application, the padding and margin have different meaning. -The padding is the spacing from the banner edges for inner elements, it's like giving the content area smaller. -The margin is the spacing from the edges of remaining area and other inner elements. - -> [!NOTE] -> If you have issue that the image or the text doesn't show in banner, it's maybe -> because of large value of padding or margins that the content can't fit into -> remaining space. - -Here are two ways to declare properties for the padding and the margins: - -- [CSS-like](#css-like) -- [Explicit](#explicit) - -#### CSS-like - -If you familiar with CSS, you know that the padding or the margin can be applied in single row: - -```css -body { - padding: 0 5; /* Applies vertical and horizontal paddings respectively */ - margin: 3 2 5; /* Applies top, horizontal and bottom paddings respectively */ -} - -main { - padding: 1 2 3 4; /* Applies top, right, bottom, left paddings respectively */ - margin: 3; /* All-directional margin */ -} -``` - -In the TOML config file you can do it using array: - -```toml -# Applies vertical and horizontal paddings respectively -padding = [0, 5] - -# Applies top, horizontal and bottom paddings respectively -margin = [3, 2, 5] - -# Applies top, right, bottom, left paddings respectively -padding = [1, 2, 3, 4] - -# All-directional margin -margin = 3 -``` - -#### Explicit - -If you don't like the CSS-like properties, here an explicit way. You can use table instead the array and write directions as keys: top, bottom, right and left. -Also if you wanna apply the same value for top and bottom (right and left) together, here the vertical (horizontal) keys. - -```toml -# Sets only top padding -padding = { top = 3 } - -# Sets only top and right padding -padding = { top = 5, right = 6 } - -# Instead of -# padding = { top = 5, right = 6, bottom = 5 } -# Write -padding = { vertical = 5, right = 6 } - -# If there are collisions of values, an error will be thrown due to ambiguity. -# padding = { top = 5, vertical = 6 } - -# You can apply the same way for margin -margin = { top = 5, horizontal = 10 } - -# For all-directional padding or margin, set only number as above in CSS -padding = 10 -margin = 5 -``` - -### Image - -Usually the notification can contain the image or icon and it draws at the right of -banner. More about it in [banner layout](BannerLayout.md#image). The `Noti` application -can perform some actions which in result the image will look very pleasant for most users. - -Here's a table of `Image` properties: - -| Property name | Description | Type | Default value | -| :-------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- | :-----------: | -| max_size | Sets the max size for image and resizes it when width or height of image exceeds `max_size` value | `u16` | 64 | -| rounding | It's a border-radius in CSS and used to round image corners | `u16` | 0 | -| margin | Creates a spacing around image. If there is no space for image, the image will be squished. | `u8` or `[u8, u8]` or `[u8, u8, u8]` or `[u8, u8, u8, u8]` or `Spacing` | 0 | -| resizing_method | Sets the resizing method for image when it exceeds `max_size`. Possible values: `"gaussian"`, `"nearest"`, `"triandle"`, `"catmull-rom"`, `"lanczos3"` | `String` | "gaussian" | - -### Border - -To notification banner you can apply border styles: border size and radius. - -- Border size - the width of stroke which is outlines around the banner. - It also reduces inner space of rectange. -- Border radius - the radius which will applied for rounding the corners of banner. - -> [!NOTE] -> You can find that the behavior of banner rounding is different from other applications. -> Here the simple rules for it: inner radius gets from formula $radius - size$. -> It means that inner rounding won't draws if border size exceeds the radius. - -The `Border` table: - -| Key | Short description | Type | Default value | -| :----- | :----------------------------------------------------- | :--- | :-----------: | -| size | The width of stroke which is outlines around the banne | `u8` | 0 | -| radius | The border radius for corner rounding | `u8` | 0 | - -### Text - -Currently the `Noti` application have only title and body, but they are interpreted as `Text` so they both -are described here. Also the `text` property was introduced which can be used for title and body at the same -time. The idiomatic way is using `text` when you want to define the same values for `title` and `body`, -otherwise define values in `title` or `body`. It means `title` and `body` **inherits** from `text` property. - -Priority of properties: - -1. Picks `title` or `body` properties; -2. If some values is not defined then check `text` properties and replace by it; -3. If some values still not defined then pick default values. - -The `Text` table: - -| Key | Short description | Type | Default value | -| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :-----------: | -| wrap | Sets possibility to line breaking when text overflows a line | `bool` | true | -| ellipsize_at | Ellipsizes a text if it's totally overflows an area. Possible values: "end" and "middle". "end" - put ellipsis at end of word, "middle" - cut word at some middle of word and puts ellipsis | `String` | "end" | -| style | Sets the style for whole text area. Possible values: "regular", "bold", "italic", "bold italic" | `String` | "regular" | -| margin | The text spacing from edges of remaining area | `Spacing` | 0 | -| justification | The text justification. Possible values: "left", "right", "center", "space-between" | `String` | "left" | -| line_spacing | The gap between wrapped text lines. Measures in px | `u8` | 0 | -| font_size | The size of font. Measures in px | `u8` | 12 | - -For more explanation how the text draws, please visit [the other documentation about text](BannerLayout.md#text). - -### Markup - -Enables text styling using HTML tags. -For body applies the `markup` property, because the body can contain the HTML-like tags: - -- \ - bold style -- \ - italic style -- \ - underline style -- \ - the image inside text - -You can turn off the `markup` property by setting `false` value. - -### Timeout - -The time in milliseconds when the notification banner should be closed by expiration -since creation. - -There is also extended timeout configuration - per urgency of banners by `Timeout` table. - -The `Timeout` table: - -| Key | Short description | Type | -| :------- | :---------------------------------------------------- | :---- | -| default | Set default timeout for all urgency | `u16` | -| low | Override timeout value for 'low' urgency banners | `u16` | -| normal | Override timeout value for 'normal' urgency banners | `u16` | -| critical | Override timeout value for 'critical' urgency banners | `u16` | - -> [!NOTE] -> The value `0` means will never expired. - ---- - -## Themes - -This is feature of the `Noti` application. Instead of defining the color values among -config properties in main config file you can define array of tables named `theme`. You should -put name of theme, otherwise it will be skipped. And use the name of theme in `display.theme`. - -> [!NOTE] -> Theme names should have **exact** match. Instead application will use the default theme. - -The `Theme` table: - -| Key | Type | Default value | Short description | -| :------- | :------- | :-----------: | :--------------------------------------- | -| low | `Colors` | - | The colors for 'low' urgency banner | -| normal | `Colors` | - | The colors for 'normal' urgency banner | -| critical | `Colors` | - | The colors for 'critical' urgency banner | - -### Colors - -Currently possible only three things that can be modified by colors: `foreground`, `background` and -`border`. - -The `Colors` table: - -| Key | Type | Default value | Short description | -| :--------- | :------ | :---------------------------------------: | :--------------------------------------- | -| background | `Color` | "#FFFFFF" | The background color of banner | -| foreground | `Color` | "#000000" (but for `critical`: "#FF0000") | The foreground color which used for text | -| border | `Color` | "#000000" (but for `critical`: "#FF0000") | The border stroke color | - -**Example of theme usage**: - -```toml -[display] -theme = "my-theme" - -[[theme]] -name = "my-theme" - -[theme.normal] -border = "#0F0" # green border for normal urgency - -[theme.critical] -border = "#F0F" # pink border for critical urgency -``` - ---- - -## Apps - -The `Noti` application have the huge feature named "app-config" in which you can redefine -`display` table specifically for particular application. - -So need to introduce the rule of picking properties: - -1. Check is there a defined property by app; -2. If not then redefine by general display property; -3. If is still not defined in general display property then pick default value. - -The format of defining `display` config per application: - -```toml -[[app]] -name = "Telegram Desktop" - -[app.display.border] -size = 3 - -[[app]] -name = "Spotify" - -[app.display] -padding = 3 -image = { max_size = 86 } - -# and so on.. -``` - -The `App` table: - -| Key | Short description | Type | -| :------ | :--------------------------------------------------- | :-------------------- | -| name | The name of application | `String` | -| display | The display configuration table for this application | [`Display`](#display) | diff --git a/docs/Filetype.md b/docs/Filetype.md deleted file mode 100644 index 55b2f2e..0000000 --- a/docs/Filetype.md +++ /dev/null @@ -1,160 +0,0 @@ -# Filetype - -The `Noti` application have the huge feature named **filetype** with which you -can declare custom layout of banners. The `Noti` team introduced the `.noti` -file extension and some logic of layout declaration. - -The `Noti` team supposed that you may not like the standard banner layout and -you want to move image to right side, or swap the title and body elements, or -nail the title to upper position instead of centering. - -All of these actions you can do with the special **filetype**. To use it, in -your main config file need to put: - -```toml -display.layout = "path/to/your/layout/File.noti" -``` - -Not matter is it global `display` config or per application. Then need to write -your layout in file. - -> [!WARNING] -> Since you use the layuot the other configuration of banners will be disabled. -> The borders configuration, paddings, margins, and so on ― that all will be -> disabled. There are also configuration variables cannot be disabled - general -> configuration, colors and something that cannot be related to banner styling. - -## Widgets and Type values - -The banner layout discusses in **widget** terms, which are powerful and easy -to use. The widget is a generic graphic object that have the single requirement ― -must be able to draw. - -Currently available only three simple widgets: - -- **FlexContainer** -- **Text** -- **Image** - -In addition to widgets, there are also **type values**. Type values are not -renderable objects and use only for configuring the widgets. Some of them are -hidden like `horizontal` and `vertical` that converts into `Direction` type. - -Available type values: - -- **Alignment** -- **Spacing** -- **Border** - -## Types - -There is not so much types for properties - only few: - -- Literal - continuous sequence of characters unsurrounded double quotes, always - treated as string -- UInt - unsigned integer -- [Type value](#widgets-and-type-values) - -The noti application have smart conversion from `Literal` type and it can be -**boolean**, **color**, **type** or something else if supported. - -## Declaration - -In one file must be **single** parent widget. Otherwise the `Noti` application -will refuse to further analyzing. - -To declare a widget or type value use _constructor with named field_: - -```noti -WidgetName( - property_name = value, - second_property_name = 3, - third_property_name = true, - fourth_property_name = TypeValueName( - type_value_property_name = 5, - ) -) -``` - -In the parentheses declares properties for widgets and fields for type values. -They're always separated by comma and here is allowed to use trailing comma. -For some widgets or type value the declaration of properties (or fields) can -be omitted to use default values: - -```noti -Image() -``` - -The parentheses is important for declaring widgets and type values, and you -cannot omit him! - -The `FlexContainer` widget is very different because it have `children` in which -you can declare inner widgets. Syntax: - -```noti -FlexContainer() { - WidgetName() - WidgetName() -} -``` - -The widgets always surrounded by curly braces. There is no specific separators -between widgets except whitespace. - -## Widget properties - -Because of the layout is separated from main config file by visual styling, the -widgets have the same options as config. It is not bad thing as you may think because -**all** important config properties you can declare in place and not need to jump -between files. - -So, the `Text` widget inherits the [text](./ConfigProperties.md#text) properties, -the `Image` widget inherits the [image](./ConfigProperties.md#image) properties, -the `Border` type value inherits the [border](./ConfigProperties.md#border) properties. - -Need to mention that for the `String` type use `Literal` (without double quotes!), for the -`u8`, `u16`, `u32` use `UInt`. - -Here we'll describe only few properties that only specific widgets and type values have. -The `-` sign in **Default value** means that it is needed to set your own value because -there is no default value. - -### FlexContainer properties - -| Property name | Description | Type | Default value | -| ------------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------- | -| direction | Sets the direction of container to arrange elements in row or column. Possible values: `horizontal` or `vertical` | `Literal` | - | -| max_width | Sets the max width of container | `UInt` | MAX | -| max_height | Sets the max height of container | `UInt` | MAX | -| border | Make a border around container | `Border` | Default [border](./ConfigProperties.md#border) values | -| spacing | Treat is `padding` from `display.padding` | `Spacing` | Spacing's default values | -| alignment | Align the container's content by horizontal and vertical | `Alignment` | - | - -### Text properties - -There are two text kinds in banner - for title and body. And need to define it to get correct -result. - -| Property name | Description | Type | Default value | -| ------------- | -------------------------------------------------------------------- | --------- | ------------- | -| kind | The kind of text. Possible values: `title` (or `summary`) or `body`. | `Literal` | - | - -### Spacing - -Unfortunately, currently unsupported the way to declare values as in CSS. - -| Property name | Description | Type | Default value | -| ------------- | ---------------------- | ------ | ------------- | -| top | Set offset from top | `UInt` | 0 | -| right | Set offset from right | `UInt` | 0 | -| bottom | Set offset from bottom | `UInt` | 0 | -| left | Set offset from left | `UInt` | 0 | - -### Alignment - -For all fields possible values: `start`, `end`, `center`, `space-between`. - -| Property name | Description | Type | Default value | -| ------------- | ------------------------------------- | --------- | ------------- | -| horizontal | Sets the alignment by horizontal axis | `Literal` | - | -| vertical | Sets the alignment by vertical axis | `Literal` | - |