### Data Binding Setup

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/data_bindings/examples.md

C++ code to set up data binding for the invaders model.

```cpp
bool SetupDataBinding(Context* context, DataModelHandle& invaders_model)
{
	DataModelConstructor constructor = context->CreateDataModel("invaders");
	if (!constructor)
		return false;

	// First, register types so that RmlUi knows how to process them.

	// Invader::damage uses std::vector<int>, we need to tell RmlUi that this is an array type.
	constructor.RegisterArray<std::vector<int>>();

	// Structs are registered by adding all its members through the returned handle.
	if (auto invader_handle = constructor.RegisterStruct<Invader>То)
	{
		invader_handle.RegisterMember("name", &Invader::name);
		invader_handle.RegisterMember("sprite", &Invader::sprite);
		invader_handle.RegisterMember("damage", &Invader::damage);
		invader_handle.RegisterMember("danger_rating", &Invader::danger_rating);

		// Getter and setter functions can also be used. Alternatively, register
		// the Colourb type as a new Scalar type instead.
		invader_handle.RegisterMember("color", &Invader::GetColor);
	}

	// We can even have an Array of Structs, infinitely nested if we so desire.
	// Make sure the underlying type (here Invader) is registered before the array.
	constructor.RegisterArray<std::vector<Invader>>();

	// Now we can bind the variables to the model.
	constructor.Bind("incoming_invaders_rate", &invaders_data.incoming_invaders_rate);
	constructor.Bind("invaders", &invaders_data.invaders);

	// This function will be called when the user clicks the 'Launch weapons' button.
	constructor.BindEventCallback("launch_weapons", &InvadersData::LaunchWeapons, &invaders_data);

	invaders_model = constructor.GetModelHandle();
}
```

--------------------------------

### Custom interface installation

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/interfaces.md

Example of how to install a custom file interface before initializing RmlUi.

```cpp
auto file_interface = std::make_unique<CustomFileInterface>();
Rml::SetFileInterface(file_interface.get());

/* ... */

Rml::Initalise();

/* ... */

Rml::Shutdown();

file_interface.reset();

```

--------------------------------

### Getting the data model handle

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/data_bindings/model.md

Example of getting the data model handle.

```cpp
DataModelHandle DataModelConstructor::GetModelHandle() const;
```

--------------------------------

### Example animation usage

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/animations_transforms.md

Demonstrates starting an animation and adding a key to it for the 'transform' property.

```cpp
auto p1 = Transform::MakeProperty({ Transforms::Rotate2D{10.f}, Transforms::TranslateX{100.f} });
auto p2 = Transform::MakeProperty({ Transforms::Scale2D{3.f} });
el->Animate("transform", p1, 1.8f, Tween( Tween::Elastic, Tween::InOut ), -1, true);
el->AddAnimationKey("transform", p2, 1.3f, Tween( Tween::Elastic, Tween::InOut ));
```

--------------------------------

### Win32 Platform IME Initialization Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/ime.md

Demonstrates how to initialize and integrate the Win32 platform's text input handler for IME support within an RmlUi application. This includes setting up the window procedure handler and installing the custom interface globally.

```cpp
#include <Backends/RmlUi_Platform_Win32.h>

static Rml::Context *context = nullptr;
static Rml::UniquePtr<TextInputMethodEditor_Win32> text_input_method_editor;

// Local event handler for window and input events.
static LRESULT CALLBACK WindowProcedureHandler(HWND window_handle, UINT message, WPARAM w_param, LPARAM l_param)
{
    return RmlWin32::WindowProcedure(context, *text_input_method_editor, window_handle, message, w_param, l_param);
}

int APIENTRY WinMain(HINSTANCE instance_handle, HINSTANCE previous_instance_handle, char* command_line, int command_show)
{
    // Initialize the window and graphics API being used, along with the renderer, system, and other interfaces, ...

    // ...

    // Instantiate the text input handler managing the IME.
    text_input_method_editor = Rml::MakeUnique<TextInputMethodEditor_Win32>();

    // Install the custom interface.
    Rml::SetTextInputHandler(text_input_method_editor.get());

    // Now we can initialize RmlUi.
    Rml::Initialise();

    // Create a context next.
    context = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
    if (context == nullptr)
    {
        Rml::Shutdown();
        return -1;
    }

    // Load documents, handle the application loop, ...

    // ...

    // Shutting down RmlUi releases all its resources, including contexts that work with the text input handler.
    Rml::Shutdown();

    // It is now safe to destroy the custom interfaces previously passed to RmlUi, such as the text input handler.
    text_input_method_editor.reset();

    return 0;
}
```

--------------------------------

### Image decorator examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/decorators/image.md

Examples of using the image decorator.

```css
.star {
    decorator: image("star.png" cover);
}
.top-right-aligned-sprite {
    decorator: image(icon-invader scale-none 70% 30%);
}
.repeat {
    decorator: image("/assets/alien_small.tga" repeat);
}
.custom-border {
    border-width: 20px 10px;
    border-color: transparent;
    decorator: image("my-custom-border.png") border-box;
}
```

--------------------------------

### Basic example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/flexboxes.md

This example demonstrates a basic flexbox layout with CSS and HTML.

```css
.flex {
	ddisplay: flex;
	background: #66806a;
	padding: 3px;
}
.flex > div {
	background-color: #fff1af;
	padding: 10px;
	margin: 3px;
	flex: 1;
}
.flex > .double-width {
	flex: 2;
}
h2 {
	text-align: center;
	font-size: 1.3em;
	color: #243434;
	border-bottom: 1px #666;
}
```

```html
<div class="flex">
	<div>
		<h2>First column</h2>
		<p>Etiam libero lorem.</p>
	</div>
	<div>
		<h2>Second column</h2>
		<p>Ut volutpat, odio et facilisis molestie, lacus elit euismod enim.</p>
	</div>
	<div class="double-width">
		<h2>Third column</h2>
		<p>Lorem ipsum dolor sit amet.</p>
	</div>
</div>
```

--------------------------------

### Initialize the Lua plugin

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/lua_manual/getting_started.md

Call the Rml::Lua::Initialise() function after Rml::Initialise() to set up the Lua plugin.

```cpp
Rml::Lua::Initialise();
```

--------------------------------

### Struct registration example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/data_bindings/model.md

Example demonstrating how to register members and functions for a custom struct.

```cpp
struct Vec2 {
	float x, y;

	float GetLength() {
		return std::sqrt(x*x + y*y);
	}
	void SetLength(float new_length) {
		float cur_length = std::sqrt(x*x + y*y);
		x *= new_length / cur_length;
		y *= new_length / cur_length;
	}
}

if (auto vec2_handle = constructor.RegisterStruct<Vec2>()) {
	vec2_handle.RegisterMember("x", &Vec2::x);
	vec2_handle.RegisterMember("y", &Vec2::y);
	vec2_handle.RegisterMember("length", &Vec2::GetLength, &Vec2::SetLength);
}
```

--------------------------------

### ObserverPtr example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/core_overview.md

An example demonstrating the usage of Rml::ObserverPtr to manage lifetime issues.

```cpp
Rml::Element* element = document->GetElementById("content");
Rml::ObserverPtr<Rml::Element> observer = element->GetObserverPtr();
// ...
if (observer) {
	// Will only enter if object is still alive.
	observer->SetClass("celebrate", true);
}

```

--------------------------------

### Shader decorator example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/decorators/shader.md

An RCSS example demonstrating the use of the shader decorator.

```css
.creation {
    decorator: shader("creation");
    border-radius: 20px;
    border: 3px #ddd;
}
```

--------------------------------

### Flex Shorthand Examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/flexboxes.md

Examples of using the 'flex' shorthand property with different values.

```css
flex: 0 1 auto;
flex: 1 1 auto;
flex: 0 0 auto;
flex: <number> 1 0;
```

--------------------------------

### Example CMake Configuration Command

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/building_with_cmake.md

Example command to configure CMake for building RmlUi with samples, GLFW backend, and debug mode.

```bash
cmake -B Build -S . -DRMLUI_SAMPLES=ON -DRMLUI_BACKEND=GLFW_GL3 -DCMAKE_BUILD_TYPE=DEBUG
```

--------------------------------

### Example of dispatching a custom event

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/events.md

Example demonstrating how to dispatch a custom 'close' event with parameters.

```cpp
Rml::Dictionary parameters;
parameters["source"] = "user";

element->DispatchEvent("close", parameters);

```

--------------------------------

### Start Local Webserver

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/building_with_cmake.md

Command to start a local webserver using Python 3 to serve compiled RmlUi samples.

```bash
python3 -m http.server
```

--------------------------------

### Extended example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/data_bindings/examples.md

This code snippet demonstrates spawning new invaders and launching shots from random invaders, updating the 'invaders' data model.

```cpp
static std::array<Rml::String, num_items> sprites = { "icon-invader", "icon-flag", "icon-game", "icon-waves" };
		static std::array<Rml::Colourb, num_items> colors = {{ { 255, 40, 30 }, {20, 40, 255}, {255, 255, 30}, {230, 230, 230} }};

		Invader new_invader;
		new_invader.name = names[rand() % num_items];
		new_invader.sprite = sprites[rand() % num_items];
		new_invader.color = colors[rand() % num_items];
		new_invader.danger_rating = float((rand() % 100) + 1);
		invaders_data.invaders.push_back(new_invader);

		invaders_model.DirtyVariable("invaders");
		invaders_data.time_last_invader_spawn = t;
	}

	// Launch shots from a random invader.
	if (t >= invaders_data.time_last_weapons_launched + 1.0)
	{
		if (!invaders_data.invaders.empty())
		{
			const size_t index = size_t(rand() % int(invaders_data.invaders.size()));

			Invader& invader = invaders_data.invaders[index];
			invader.damage.push_back(rand() % int(invader.danger_rating));

			invaders_model.DirtyVariable("invaders");
		}
		invaders_data.time_last_weapons_launched = t;
	}
}
```

--------------------------------

### Additional shader decorator examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/decorators/shader.md

More examples of RCSS with the shader decorator.

```css
.shader1 {
    decorator: shader("my_shader") border-box;
}
.shader2 {
    decorator: shader("snake and rabbit");
}
```

--------------------------------

### Box Shadow Examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/colours_backgrounds.md

Examples demonstrating various uses of the 'box-shadow' property in RCSS.

```css
/* Single box shadow */
box-shadow: #000a 5px 5px 5px;

/* Multiple box shadows */
box-shadow: #f008 40px 30px 0px 0px, #00f8 -40px -30px 0px 0px;

/* Inset box shadow */
box-shadow: #000a 5px 5px 5px inset;

/* Stacked box shadows */
box-shadow:
    #f66 30px 30px 0 0,
    #c88 60px 60px 0 0,
    #baa 90px 90px 0 0;

/* Colorful box shadows */
box-shadow:
    #f00f  40px  30px 25px 0px,
    #00ff -40px -30px 45px 0px,
    #0f08 -60px  70px 60px 0px,
    #333a  0px  0px 30px 15px inset;
```

--------------------------------

### HTML Structure

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/data_bindings/examples.md

An example of HTML structure with data bindings.

```html
<p>
	Incoming invaders:
	<input type="range" name="rating" min="0" max="20" step="5" data-value="incoming_invaders_rate"/>
	{{ incoming_invaders_rate }} / min.
</p>
<button data-event-click="launch_weapons">Launch weapons!</button>
<div data-for="invader : invaders">
	<h1 data-class-red="invader.danger_rating > 70">{{invader.name}}</h1>
	<p>Invader {{it_index + 1}} of {{ invaders.size }}.</p>
	<img data-attr-sprite="invader.sprite" data-style-image-color="invader.color"/>
	<p>
		Shots fired (damage): <span data-for="invader.damage"> {{it}} </span>
	</p>
</div>
<h1 data-if="invaders.size == 0">It's all safe and sound, sir!</h1>
```

--------------------------------

### Built-in Decorator Examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/decorators.md

Examples of using built-in decorators for images and tiled boxes.

```css
/* declares an image decorater by a sprite name */
decorator: image( icon-invader );

/* declares a tiled-box decorater by several sprites */
decorator: tiled-box(
	window-tl, window-t, window-tr,
	window-l, window-c, window-r,
	window-bl, window-b, window-br
);

/* declares an image decorator by the url of an image,
   displayed across the content box of the element */
decorator: image( invader.tga ) content-box;
```

--------------------------------

### Text Input Method Editor Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/interfaces/text_input_handler.md

An example implementation of a text input method editor using the text input context, demonstrating how to handle IME composition.

```cpp
class TextInputMethodEditor {
public:
    void SetComposition(Rml::StringView composition);
    void ConfirmComposition(Rml::StringView composition);

private:
    // An actively used text input method context.
    Rml::TextInputContext* input_context;

    // Composition range (character position) relative to the text input value.
    int composition_range_start;
    int composition_range_end;
};

void TextInputMethodEditor::SetComposition(Rml::StringView composition)
{
    // Retrieve the composition range if it is missing.
    if (composition_range_start == 0 && composition_range_end == 0)
        input_context->GetSelectionRange(composition_range_start, composition_range_end);

    // First, modify the text value of the text area to insert the current composition string.
    input_context->SetText(composition, composition_range_start, composition_range_end);

    // Calculate the new end of the composition range, as the string has changed.
    size_t length = Rml::StringUtilities::LengthUTF8(composition);
    composition_range_end = composition_range_start + (int)length;

    // Once we are finished with text modifications, apply the composition range for visual feedback.
    input_context->SetCompositionRange(composition_range_start, composition_range_end);
}

void TextInputMethodEditor::ConfirmComposition(Rml::StringView composition)
{
    // First, set the composition range, which will be used for inserting the composition string.
    input_context->SetCompositionRange(composition_range_start, composition_range_end);
    // Once the range is set, insert the composition string into the text field.
    input_context->CommitComposition(Rml::String(composition));

    // Move the cursor to the end of the string.
    input_context->SetCursorPosition(composition_range_end);

    // End the composition, clean up the state, ...

    // ...
}

```

--------------------------------

### HTML Table Structure Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/tables.md

An example demonstrating a table with grouped rows and columns, using various table display modes.

```html
<table>
	<col/>
	<colgroup>
		<col span="2"/>
		<col/>
	</colgroup>
	<thead>
		<tr>
			<td>Name</td>
			<td colspan="2">Items</td>
			<td>Age</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Gimli</td>
			<td>Helmet</td>
			<td>Axe</td>
			<td>139 years</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="4">Footnote</td>
		</tr>
	</tfoot>
</table>
```

--------------------------------

### Access property values

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/rcss.md

Examples of retrieving specific property values from elements.

```cpp
element->GetProperty(Rml::PropertyId::FontFamily)->Get< Rml::String >();
```

```cpp
bool bold = element->GetProperty("font-weight")->Get< int >() == (int)Rml::Style::FontWeight::Bold;
```

```cpp
bool bold = element->GetProperty< int >("font-weight") == (int)Rml::Style::FontWeight::Bold;
```

--------------------------------

### Install vcpkg dependencies

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/building_with_cmake.md

Installs FreeType and GLFW dependencies using vcpkg.

```bash
vcpkg install freetype glfw
```

--------------------------------

### Checked State Binding with Flexibility Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/data_bindings/views_and_controllers.md

Provides an example of using data-attrif-checked and data-event-change for more flexible checked state binding.

```html
<input type="checkbox" data-attrif-checked="pasta" data-event-change="pasta = ev.checked || force_pasta"/>
```

--------------------------------

### Single decorator example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/decorators.md

Illustrates how to use a single decorator with its properties.

```css
decorator: <type>( <properties> );
```

--------------------------------

### Fetching Filter Parameter Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/interfaces/render.md

Example of how to fetch a float parameter named 'value' from a Rml::Dictionary.

```cpp
float brightness = Rml::Get(parameters, "value", 0.f);
```

--------------------------------

### Glow font effect examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/font_effects/glow.md

Examples demonstrating how to apply the glow font effect for a simple glow and a drop shadow effect.

```css
h1
{
	font-effect: glow( 3px #ee9 );
}
/* The glow effect can also create nice looking shadows. */
p.glow_shadow
{
	color: #ed5;
	font-effect: glow(2px 4px 2px 3px #644);
}
```

--------------------------------

### Define a percentage property

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/syntax.md

Example of assigning a percentage value to a property.

```css
min-height: 50%;
```

--------------------------------

### Tiled Box Example with Spritesheet

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/decorators/tiled_box.md

An example of using the tiled-box decorator with images defined in a spritesheet, demonstrating how to map sprite names to the nine regions of the decorator.

```css
@spritesheet demo-sheet
{
	src: /assets/invader.tga;

	window-tl: 0px 0px 133px 140px;
	window-t:  134px 0px 1px 140px;
	window-tr: 136px 0px 10px 140px;
	window-l:  0px 139px 10px 1px;
	window-c:  11px 139px 1px 1px;
	window-r:  10px 139px -10px 1px; /* mirrored left */
	window-bl: 0px 140px 11px 11px;
	window-b:  11px 140px 1px 11px;
	window-br: 136px 140px 10px 11px;
}

.tiled-box {
	decorator: tiled-box(
		window-tl, window-t, window-tr,
		window-l, window-c, window-r,
		window-bl, window-b, window-br
	);
}
```

--------------------------------

### Single filter example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/filters.md

Illustrates how to use a single filter.

```css
filter: sepia(1.5);
```

--------------------------------

### Animated filters example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/filters.md

Demonstrates how filters can be animated using keyframes.

```css
@keyframes animate-filter {
    from { filter: drop-shadow(#f00) opacity(1.0) sepia(1.0); }
    to   { filter: drop-shadow(#000 30px 20px 5px) opacity(0.2) sepia(0.2); }
}
.animate {
    animation: animate-filter 1.5s cubic-in-out infinite alternate;
}
```

--------------------------------

### Document File Structure

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/tutorials/window_template.md

This is an example of how the document file should be structured to use the template.

```html
<rml>
<head>
	<link type="text/template" href="template.rml"/>
	<title>Window</title>
	<style>
		body
		{
			width: 400px;
			height: 300px;

			margin: auto;
		}
	</style>
</head>
<body template="window">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</body>
</rml>
```

--------------------------------

### SampleSystemInterface for IME

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/ime.md

An example implementation of Rml::SystemInterface to handle keyboard activation and position the candidate window for IMEs.

```cpp
#include <RmlUi/Core/SystemInterface.h>

class SampleSystemInterface : public Rml::SystemInterface {
private:
    void ActivateKeyboard(Rml::Vector2f caret_position, float line_height) override;

private:
    HWND window_handle;
};

void SampleSystemInterface::ActivateKeyboard(Rml::Vector2f caret_position, float line_height)
{
    HIMC himc = ImmGetContext(window_handle);
    if (himc == NULL)
        return;

    constexpr LONG BottomMargin = 2;

    // Adjust the position of the input method editor (IME) to the caret.
    const LONG x = static_cast<LONG>(caret_position.x);
    const LONG y = static_cast<LONG>(caret_position.y);
    const LONG w = 1;
    const LONG h = static_cast<LONG>(line_height) + BottomMargin;

    COMPOSITIONFORM comp = {};
    comp.dwStyle = CFS_FORCE_POSITION;
    comp.ptCurrentPos = {x, y};
    ImmSetCompositionWindow(himc, &comp);

    CANDIDATEFORM cand = {};
    cand.dwStyle = CFS_EXCLUDE;
    cand.ptCurrentPos = {x, y};
    cand.rcArea = {x, y, x + w, y + h};
    ImmSetCandidateWindow(himc, &cand);

    ImmReleaseContext(window_handle, himc);
}
```

--------------------------------

### Elapsed time

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/interfaces/system.md

Get the number of seconds elapsed since the start of the application.

```cpp
// Get the number of seconds elapsed since the start of the application.
virtual double GetElapsedTime();
```

--------------------------------

### Setting up the Data Model in C++

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/data_bindings/examples.md

C++ code demonstrating how to create and bind data variables to a data model in RmlUi.

```cpp
using namespace Rml;

struct MyData {
	String title = "Hello World!";
	String animal = "dog";
	bool show_text = true;
} my_data;

bool SetupDataBinding(Context* context, DataModelHandle& my_model)
{
	DataModelConstructor constructor = context->CreateDataModel("my_model");
	if (!constructor)
		return false;

	constructor.Bind("title", &my_data.title);
	constructor.Bind("animal", &my_data.animal);
	constructor.Bind("show_text", &my_data.show_text);

	my_model = constructor.GetModelHandle();

	return true;
}
```

--------------------------------

### Initialize the Lua plugin with a custom Lua state

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/lua_manual/getting_started.md

Optionally, initialize the Lua plugin with a pre-existing Lua state.

```cpp
Rml::Lua::Initialise(lua_State* L);
```

--------------------------------

### Template File Structure

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/tutorials/window_template.md

This is an example of how the template file should be structured after modifications.

```html
<template name="window" content="content">
<head>
	<link type="text/css" href="../../assets/rkt.rcss"/>
	<link type="text/css" href="tutorial.rcss"/>
</head>
<body class="window">
	<div id="title-bar">
		<handle move_target="#document">
			<span id="title">Dummy Title</span>
		</handle>
	</div>
	<div id="content">
	</div>
</body>
</template>
```

--------------------------------

### Example RCSS

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/style_guide.md

The following are the select element's RCSS rules and properties from the _Rocket Invaders from Mars_ style sheet.

```css
@spritesheet theme
{
	src: invader.tga;

	/* ... */

	selectbox-tl: 281px 275px 11px 9px;
	selectbox-t:  292px 275px 1px 9px;
	selectbox-tr: 294px 275px 11px 9px;
	selectbox-l:  281px 283px 11px 1px;
	selectbox-c:  292px 283px 1px 1px;
	selectbox-bl: 281px 285px 11px 11px;
	selectbox-b:  292px 285px 1px 11px;
	selectbox-br: 294px 285px 11px 11px;

	selectvalue: 162px 192px 145px 37px;
	selectvalue-hover: 162px 230px 145px 37px;
	selectarrow: 307px 192px 30px 37px;
	selectarrow-hover: 307px 230px 30px 37px;
	selectarrow-active: 307px 268px 30px 37px;

	/* ... */
}

/* Specify the dimensions of the select element. */
select
{
	width: 175px;
	height: 37px;
}

/* Specify the dimensions of the value element within the select element. Padding is used to position the
   value correctly internally. */
select selectvalue
{
	width: auto;
	margin-right: 30px;

	height: 28px;
	padding: 9px 10px 0px 10px;

	decorator: image( selectvalue  );
}

/* Animate the value field when it is hovered. */
select selectvalue:hover
{
	decorator: image( selectvalue-hover );
}

/* Fix the size of the select arrow decorate the element. */
select selectarrow
{
	width: 30px;
	height: 37px;

	decorator: image( selectarrow );
}

/* Animate the arrow when hovered. */
select selectarrow:hover
{
	decorator: image( selectarrow-hover );
}

/* Animate the arrow when the button is pressed or the box is visible. */
select selectarrow:active,
select selectarrow:checked,
{
	decorator: image( selectarrow-active );
}

/* Fix the width of the select box and fiddle with the margins to get it in exactly the right place. */
select selectbox
{
	margin-left: 1px;
	margin-top: -7px;
	width: 162px;
	padding: 1px 4px 4px 4px;

	decorator: tiled-box(
		selectbox-tl, selectbox-t, selectbox-tr,
		selectbox-l, selectbox-c, auto,  /* auto mirrors left */
		selectbox-bl, selectbox-b, selectbox-br
	);
}

/* Sizes the option element to take up the available width in the select box. */
select selectbox option
{
	width: auto;
	padding-left: 3px;
}

/* Specifies every second option in the selection box to have a white background. */
select selectbox option:nth-child(even)
{
	background: #FFFFFFA0;
}

/* Gives the red highlight to the selection box. */
select selectbox option:hover
{
	background: #FF5D5D;
}

```

--------------------------------

### Include Lua plugin headers

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/lua_manual/getting_started.md

Include the necessary header file for the RmlUi Lua plugin in C++ source files.

```cpp
#include <RmlUi/Lua.h>
```

--------------------------------

### Enable Lua plugin during CMake configuration

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/lua_manual/getting_started.md

Options to enable and configure the Lua plugin during the RmlUi build process using CMake.

```cmake
RMLUI_LUA_BINDINGS ON
RML_LUA_BINDINGS_LIBRARY lua_as_cxx
LUA_DIR /path/to/lua
```

--------------------------------

### Scrollbar RCSS Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/style_guide.md

This CSS code defines the styling for scrollbars in RmlUi, including track, bar, and arrow elements, with hover and active states.

```css
@spritesheet theme
{
	src: invader.tga;

	/* ... */

	slidertrack-t: 70px 199px 27px 2px;
	slidertrack-c: 70px 201px 27px 1px;
	slidertrack-b: 70px 202px 27px 2px;

	sliderbar-t:         56px 152px 23px 23px;
	sliderbar-c:         56px 175px 23px 1px;
	sliderbar-b:         56px 176px 23px 22px;
	sliderbar-hover-t:   80px 152px 23px 23px;
	sliderbar-hover-c:   80px 175px 23px 1px;
	sliderbar-hover-b:   80px 176px 23px 22px;
	sliderbar-active-t: 104px 152px 23px 23px;
	sliderbar-active-c: 104px 175px 23px 1px;
	sliderbar-active-b: 104px 176px 23px 22px;

	sliderarrowdec: 0px 152px 27px 24px;
	sliderarrowdec-hover: 0px 177px 27px 24px;
	sliderarrowdec-active: 0px 202px 27px 24px;

	sliderarrowinc: 28px 152px 27px 24px;
	sliderarrowinc-hover: 28px 177px 27px 24px;
	sliderarrowinc-active: 28px 202px 27px 24px;
}

/* Fix the width and push the scrollbar back to the extents of the window. */
scrollbarvertical
{
	margin-top: -6px;
	margin-bottom: -6px;
	margin-right: -11px;
	width: 27px;
}

/* Decorate the slider track. */
scrollbarvertical slidertrack
{
	decorator: tiled-vertical( slidertrack-t, slidertrack-c, slidertrack-b );
}
/* Darken the decorator on active. */
scrollbarvertical slidertrack:active
{
	image-color: #aaa;
}

/* Push the slider bar in 4 pixels from the left edge. Fix the width of the bar and make sure
   the height doesn't drop below 46 pixels; under that the decorator will start squishing the
   images. */
scrollbarvertical sliderbar
{
	margin-left: 4px;
	width: 23px;
	min-height: 46px;

	decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b );
}

/* Animate the bar's decorator on hover. */
scrollbarvertical sliderbar:hover
{
	decorator: tiled-vertical( sliderbar-hover-t, sliderbar-hover-c, sliderbar-hover-b );
}

/* Animate the bar's decorator on active. */
scrollbarvertical sliderbar:active
{
	decorator: tiled-vertical( sliderbar-active-t, sliderbar-active-c, sliderbar-active-b );
}

/* Fix the size of the 'page up' slider arrow and decorate it appropriately. */
scrollbarvertical sliderarrowdec
{
	width: 27px;
	height: 24px;

	decorator: image( sliderarrowdec );
}
/* Animate the arrows on hover. */
scrollbarvertical sliderarrowdec:hover
{
	decorator: image( sliderarrowdec-hover );
}
/* Animate the arrows on active. */
scrollbarvertical sliderarrowdec:active
{
	decorator: image( sliderarrowdec-active );
}


/* Fix the size of the 'page down' slider arrow and decorate it appropriately. */
scrollbarvertical sliderarrowinc
{
	width: 27px;
	height: 24px;

	decorator: image( sliderarrowinc )
}
/* Animate the arrows on hover. */
scrollbarvertical sliderarrowinc:hover
{
	decorator: image( sliderarrowinc-hover );
}
/* Animate the arrows on active. */
scrollbarvertical sliderarrowinc:active
{
	decorator: image( sliderarrowinc-active );
}

```

--------------------------------

### Input Range Slider Styling Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/style_guide.md

This CSS rule demonstrates how to style the slidertrack element for input range sliders, leveraging the 'range' class automatically applied to input elements.

```css
input.range slidertrack
{
	/* ... */
}
```

--------------------------------

### Complex Selector Examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/selectors.md

Examples of complex selectors using different combinators.

```css
div.content p {}
```

```css
div.content > p {}
```

```css
div.content + p {}
```

```css
div.content ~ p {}
```

--------------------------------

### Line-height examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/visual_formatting_model_details.md

Demonstrates three equivalent ways to set the line-height property in CSS.

```css
div
{
	line-height: 1.3;
	line-height: 1.3em;
	line-height: 130%;
}
```

--------------------------------

### Example Usage of Filter Registration

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/filters.md

Demonstrates how to register a custom filter instancer, ensuring the instancer remains alive until Rml::Shutdown.

```cpp
// Keep instancer alive until after the call to Rml::Shutdown().
auto instancer = std::make_unique<CustomFilterInstancer>();
Rml::Factory::RegisterFilterInstancer("custom-filter", instancer.get());
```

--------------------------------

### HTML inline style example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/rcss.md

Example of setting an inline style attribute on a div element.

```html
<div id="test" style="width: 200px;" />
```

--------------------------------

### Text overflow examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/text.md

Examples demonstrating the different values of the text-overflow property in RCSS.

```css
p { overflow: hidden; }
p.ellipsis           { text-overflow: ellipsis; }
p.custom-string      { text-overflow: "_O_"; }
p.clip-at-characters { text-overflow: ""; }
```

--------------------------------

### Descendant Combinator Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/selectors.md

A detailed example of a descendant combinator, illustrating the hierarchical matching process.

```css
div#level_list input.select option:nth-child(even)
```

--------------------------------

### Running the Invaders Sample on macOS and Linux

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/building_with_cmake.md

Command to run the invaders sample after building on macOS and Linux.

```bash
Build/rmlui_sample_invaders
```

--------------------------------

### Image Color Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/colours_backgrounds.md

Example of using the 'image-color' property in RCSS.

```css
image-color: rgba(255, 160, 160, 200);
decorator: image( background.png );
```

--------------------------------

### Build RmlUi with samples using CMake and vcpkg

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/building_with_cmake.md

Downloads and builds RmlUi with samples using CMake, specifying the vcpkg toolchain file and the GLFW_GL3 backend.

```bash
git clone https://github.com/mikke89/RmlUi.git
cd RmlUi
cmake -B Build -S . --preset samples -DRMLUI_BACKEND=GLFW_GL3 -DCMAKE_TOOLCHAIN_FILE=<vcpkg-path>/scripts/buildsystems/vcpkg.cmake
cmake --build Build
```

--------------------------------

### Multiple decorators example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/decorators.md

Shows how to apply multiple decorators, which will be rendered in the declared order from top to bottom.

```css
decorator: <type>( <properties> ), <type>( <properties> ), ... ;
```

--------------------------------

### Rml::Factory::InstanceStyleSheetFile

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/rcss.md

Creates a style sheet from a file.

```APIDOC
## Rml::Factory::InstanceStyleSheetFile

### Description
Creates a style sheet from an RCSS file.

### Signature
static Rml::SharedPtr<Rml::StyleSheet> InstanceStyleSheetFile(const Rml::String& file_name);
```

--------------------------------

### Compound Selector Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/selectors.md

An example of a compound selector matching a div with a specific ID and hover state.

```css
div#level_list:hover
```

--------------------------------

### Building LunaSVG dependency

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/svg.md

Command-line instructions for cloning and building the LunaSVG library using CMake.

```cmd
git clone --recurse-submodules --branch v3.2.1 https://github.com/sammycage/lunasvg
cd lunasvg
cmake -B build -S . -DBUILD_SHARED_LIBS=OFF -DLUNASVG_BUILD_EXAMPLES=OFF
cmake --build build --target lunasvg --config Debug
cmake --build build --target lunasvg --config Release
```

--------------------------------

### Install RmlUi using vcpkg

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/building_with_cmake.md

Installs RmlUi using the vcpkg package manager.

```bash
vcpkg install rmlui
```

--------------------------------

### Construct a texture from file

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/decorators.md

Use the interface to load a texture, which automatically resolves relative paths.

```cpp
Rml::Texture texture = interface.GetTexture("button.png");
```

--------------------------------

### Overflow CSS Example

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/visual_effects.md

Example demonstrating how to hide horizontal overflow and generate a vertical scrollbar if needed.

```css
/* Hide horizontal overflowing content and generate a scrollbar (if required) along the vertical axis. */
div#content
{
	overflow: hidden auto;
}
```

--------------------------------

### RCSS Media Query Examples

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/rcss/media_queries.md

Examples of RCSS media queries demonstrating different conditions and features.

```css
@media (orientation: landscape) and (min-width: 640px)
{
	#menu {
		float: left;
		width: 320px;
	}
}

@media (min-resolution: 2x)
{
	@spritesheet theme2x
	{
		src: invader2x.tga;
		resolution: 2x;

		icon-invader: 179px 152px 102px 78px;
		icon-game:    330px 152px 102px 78px;
		icon-score:   534px 152px 102px 78px;
		icon-help:    728px 152px 102px 78px;
	}
}

@media (theme: blue)
{
	body {
		color: blue;
	}
	#header {
		background-color: #33e;
	}
}

@media not (theme: blue)
{
	body {
		color: red;
	}
	#header {
		background-color: #e33;
	}
}
```

--------------------------------

### Configure RmlUi with Lottie plugin

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/cpp_manual/lottie.md

Example CMake command to configure RmlUi, enabling the Lottie plugin and shared libraries.

```cmd
cmake -B Build -S . --preset samples -DBUILD_SHARED_LIBS=OFF -DRMLUI_LOTTIE_PLUGIN=ON
```

--------------------------------

### Listing all contexts

Source: https://github.com/mikke89/rmluidoc/blob/master/pages/lua_manual/contexts.md

Shows how to iterate through all available contexts and print their names.

```lua
for i,context in ipairs(rmlui.contexts) do
	print('Context ' .. i .. ': ' .. context.name)
end
```