Skip to content

Commit

Permalink
Update readme and changelog
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikke89
mikke89 committed Sep 29, 2024
1 parent 025b05d commit a903d8f
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 101 deletions.
68 changes: 63 additions & 5 deletions changelog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,58 @@
* [RmlUi 3.0](#rmlui-30)
* [RmlUi 2.0](#rmlui-20)

## RmlUi 6.1 (WIP)

### Flexbox layout improvements

- Apply automatic minimum size of flex items in column mode with auto size. #658
- Performance improvement: Skip calculating hypothetical cross size when not needed. Avoids a potentially expensive formatting step in some situations. #658
- Fix hypothetical width of replaced elements (such as images) in column direction layout. #666
- Fix hitting an assertion due to negative flex item size in some situations when edge size is fractional. #657

### Animations

- Add interpolation of color stop lists, which enables animation of color and position of stops in gradient decorators. #667

### RCSS Values

- Support `hsl` and `hsla` colors. E.g. `color: hsl(30, 80%, 50%)`. #674 (thanks @AmaiKinono)


## RmlUi 6.0

* [Advanced rendering features](#advanced-rendering-features)
* [New features](#new-features)
* [Screenshots](#screenshots)
* [Major overhaul of the render interface](#major-overhaul-of-the-render-interface)
* [Backward compatible render interface adapter](#backward-compatible-render-interface-adapter)
* [Render manager and resources](#render-manager-and-resources)
* [Limitations](#limitations)
* [Major layout engine improvements](#major-layout-engine-improvements)
* [Detailed layout improvements](#detailed-layout-improvements)
* [Layout comparisons](#layout-comparisons)
* [General layout improvements](#general-layout-improvements)
* [CMake modernization](#cmake-modernization)
* [New target names](#new-target-names)
* [New library filenames](#new-library-filenames)
* [New option names](#new-option-names)
* [New exported definitions](#new-exported-definitions)
* [CMake presets](#cmake-presets)
* [Spatial navigation](#spatial-navigation)
* [Text shaping and font engine](#text-shaping-and-font-engine)
* [Elements](#elements)
* [Text input widget](#text-input-widget)
* [Utilities](#utilities)
* [Data bindings](#data-bindings)
* [Debugger plugin](#debugger-plugin)
* [Lua plugin](#lua-plugin)
* [System interface](#system-interface)
* [General improvements](#general-improvements)
* [General fixes](#general-fixes)
* [Build improvements](#build-improvements)
* [Backends](#backends)
* [Breaking changes](#breaking-changes)

### Advanced rendering features

This one has been a long time in the making, now the time has come for one of the biggest additions to the library. Advanced rendering effects are now available, including filters with blur support, box-shadow, advanced gradients, shaders, masks, and clipping of rounded borders.
Expand Down Expand Up @@ -46,7 +95,7 @@ The gradients support most of the CSS features and syntax, including angle and `

- Decorators can now take an extra keyword `<paint-area>` which is one of `border-box | padding-box | content-box`. The keyword indicates which area of the element the decorator should apply to. All built-in decorators are modified to support this property. For example: `decorator: linear-gradient(to top right, yellow, blue) border-box`.

- Custom filters can be created by users by deriving from `Filter` and `FilterInstancer`, analogous to how custom decorators are created.
- [Custom filters](https://mikke89.github.io/RmlUiDoc/pages/cpp_manual/filters.html#custom-filters) can be created by users by deriving from `Filter` and `FilterInstancer`, analogous to how custom decorators are created.

- Improved element clipping behavior. Handles more complicated cases, including nested transforms with hidden overflow, and clipping to the curved edge of elements with border-radius. This requires clip mask support in the renderer.

Expand Down Expand Up @@ -187,8 +236,8 @@ Here is a more detailed change list resulting from the rewritten inline formatti
- Support for new [`display`](https://mikke89.github.io/RmlUiDoc/pages/rcss/visual_formatting_model.html#display) values: `flow-root`, `inline-flex`, `inline-table`.
- Support for the value [`vertical-align: center`](https://www.w3.org/TR/css-inline-3/#valdef-baseline-shift-center).
- Stacking contexts are now established in a way that more closely aligns with CSS.
- Improve paint order of elements.
- Render all stacking context children after the current element's background and decoration. This change is consistent with the CSS paint order. (In filter branch, this way we require less render state changes which leads to simpler code and possibly better performance).
- Improve the paint order of elements.
- Render all stacking context children after the current element's background and decoration. This change is consistent with the CSS paint order. Additionally, it leads to simpler code and less state change, particularly when combined with the advanced rendering effects.
Please see the list of breaking changes and solutions at the end of the changelog.
Expand All @@ -198,7 +247,7 @@ Here are some screenshots demonstrating the layout improvements.
![inline-formatting-01-mix](https://github.com/user-attachments/assets/f27ce0ef-2150-4545-9af2-eca65f1fc02a)
The above example demonstrates a variety of inline formatting details, with nested elements and borders ([fiddle](https://jsfiddle.net/kmouse/etpnu6rb/55/)). We now match nicely with web browsers in such situations. The old behavior has several issues, in particular the elements are not aligned correctly and the border is broken off too early. Note that Firefox in these examples use a different font, so expect some differences for that reason.
The above example demonstrates a variety of inline formatting details, with nested elements and borders ([fiddle](https://jsfiddle.net/kmouse/etpnu6rb/55/)). We now match nicely with web browsers in such situations. The old behavior has several issues, in particular the elements are not aligned correctly and the border is broken off too early. Note that Firefox in these examples uses a different font, so expect some differences for that reason.
![inline-formatting-04-mix](https://github.com/user-attachments/assets/f547e44d-9a1b-4053-b2e2-4d2efaf9cd5b)
Expand Down Expand Up @@ -344,7 +393,7 @@ The presets can be combined with other options, like `CMAKE_BUILD_TYPE` to selec
Introduce [spatial navigation](https://mikke89.github.io/RmlUiDoc/pages/rcss/user_interface.html#nav) for keyboards and other input devices. This determines how the focus is moved when pressing one of the navigation direction buttons. #142 #519 #524 (thanks @gleblebedev)
- Add the new properties `nav-up`, `nav-right`, `nav-down`, `nav-left`, and shorthand `nav`. E.g.
- Add the new properties `nav-up`, `nav-right`, `nav-down`, `nav-left`, and shorthand `nav`.
- Add [`:focus-visible` pseudo class](https://mikke89.github.io/RmlUiDoc/pages/rcss/selectors.html#pseudo-selectors) as a way to style elements that should be highlighted during navigation, like its equivalent CSS selector.
- The `invaders` sample implements this feature for full keyboard navigation, and uses `:focus-visible` to highlight the focus.
- Elements in focus are now clicked when pressing space bar.
Expand All @@ -365,6 +414,11 @@ input { nav: auto; nav-right: #ok_button; }
- Add support for the [`letter-spacing` property](https://mikke89.github.io/RmlUiDoc/pages/rcss/text.html#letter-spacing). #429 (thanks @igorsegallafa)
- Add initialize and shutdown procedures to font engine interface for improved lifetime management. #583

Screenshots of the HarfBuzz sample showing Arabic text properly rendered with the HarfBuzz font engine, and compared to the default font engine:

![HarfBuzz font engine vs default font engine comparison](https://github.com/user-attachments/assets/67b22875-e504-49c2-b449-3f3e4367d991)


### Elements

- Enable removal of properties using shorthand names. #463 (thanks @aimoonchen)
Expand Down Expand Up @@ -393,6 +447,10 @@ The following improvements apply to both the textarea and text input elements.
- Fix some cases where the scroll offset would alternate each time the text cursor was moved, causing rendering to flicker.
- Use rounded line height to make render output more stable when scrolling vertically.

IME sample screenshot:

![IME sample screenshots](https://github.com/mikke89/RmlUiDoc/blob/3ec50d400babb58bf4c79f26ac2454a2833bd95d/assets/images/ime_sample.png)

### Utilities

- Improved mesh utilities to construct background geometry for any given box area of the element, including for elements with border-radius, see [`MeshUtilities.h`](./Include/RmlUi/Core/MeshUtilities.h).
Expand Down
182 changes: 86 additions & 96 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ RmlUi is based around the XHTML1 and CSS2 standards while borrowing features fro

Documentation is located at https://mikke89.github.io/RmlUiDoc/

---


## Features

- Cross-platform architecture: Windows, macOS, Linux, iOS, etc.
Expand Down Expand Up @@ -101,7 +98,7 @@ That's it! See below for details on integrating RmlUi.
To build RmlUi with the included samples we can use git and CMake together with vcpkg to handle dependencies.

```
vcpkg install freetype glfw
vcpkg install freetype glfw3
git clone https://github.com/mikke89/RmlUi.git
cd RmlUi
cmake -B Build -S . --preset samples -DRMLUI_BACKEND=GLFW_GL3 -DCMAKE_TOOLCHAIN_FILE="<path-to-vcpkg>/scripts/buildsystems/vcpkg.cmake"
Expand Down Expand Up @@ -196,15 +193,15 @@ This example demonstrates a basic document with [data bindings](https://mikke89.
```html
<rml>
<head>
<title>Hello world</title>
<link type="text/rcss" href="rml.rcss"/>
<link type="text/rcss" href="window.rcss"/>
<title>Hello world</title>
<link type="text/rcss" href="rml.rcss"/>
<link type="text/rcss" href="window.rcss"/>
</head>
<body data-model="animals">
<h1>RmlUi</h1>
<p>Hello <span id="world">world</span>!</p>
<p data-if="show_text">The quick brown fox jumps over the lazy {{animal}}.</p>
<input type="text" data-value="animal"/>
<h1>RmlUi</h1>
<p>Hello <span id="world">world</span>!</p>
<p data-if="show_text">The quick brown fox jumps over the lazy {{animal}}.</p>
<input type="text" data-value="animal"/>
</body>
</rml>
```
Expand All @@ -216,40 +213,40 @@ The `{{animal}}` text and the `data-if`, `data-value` attributes represent data

```css
body {
font-family: LatoLatin;
font-size: 18px;
color: #02475e;
background: #fefecc;
text-align: center;
padding: 2em 1em;
position: absolute;
border: 2px #ccc;
width: 500px;
height: 200px;
margin: auto;
font-family: LatoLatin;
font-size: 18px;
color: #02475e;
background: #fefecc;
text-align: center;
padding: 2em 1em;
position: absolute;
border: 2px #ccc;
width: 500px;
height: 200px;
margin: auto;
}

h1 {
color: #f6470a;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 0.7em;
color: #f6470a;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 0.7em;
}

p {
margin: 0.7em 0;
margin: 0.7em 0;
}

input.text {
background-color: #fff;
color: #555;
border: 2px #999;
padding: 5px;
tab-index: auto;
cursor: text;
box-sizing: border-box;
width: 200px;
font-size: 0.9em;
background-color: #fff;
color: #555;
border: 2px #999;
padding: 5px;
tab-index: auto;
cursor: text;
box-sizing: border-box;
width: 200px;
font-size: 0.9em;
}
```

Expand All @@ -265,85 +262,78 @@ RmlUi defines no styles internally, thus the `input` element is styled here, and

class MyRenderInterface : public Rml::RenderInterface
{
// RmlUi sends vertices, indices and draw commands through this interface for your
// application to render how you'd like.
/* ... */
}

class MySystemInterface : public Rml::SystemInterface
{
// RmlUi requests the current time and provides various utilities through this interface.
/* ... */
// RmlUi sends vertices, indices and draw commands through this interface for your
// application to render how you'd like.
/* ... */
}

struct ApplicationData {
bool show_text = true;
Rml::String animal = "dog";
bool show_text = true;
Rml::String animal = "dog";
} my_data;

int main(int argc, char** argv)
{
// Initialize the window and graphics API being used, along with your game or application.
// Initialize the window and graphics API being used, along with your game or application.

/* ... */
/* ... */

MyRenderInterface render_interface;
MySystemInterface system_interface;
MyRenderInterface render_interface;

// Install the custom interfaces.
Rml::SetRenderInterface(&render_interface);
Rml::SetSystemInterface(&system_interface);
// Install the custom interfaces.
Rml::SetRenderInterface(&render_interface);

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

// Create a context to display documents within.
Rml::Context* context = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
// Create a context to display documents within.
Rml::Context* context =
Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));

// Tell RmlUi to load the given fonts.
Rml::LoadFontFace("LatoLatin-Regular.ttf");
// Fonts can be registered as fallback fonts, as in this case to display emojis.
Rml::LoadFontFace("NotoEmoji-Regular.ttf", true);
// Tell RmlUi to load the given fonts.
Rml::LoadFontFace("LatoLatin-Regular.ttf");
// Fonts can be registered as fallback fonts, as in this case to display emojis.
Rml::LoadFontFace("NotoEmoji-Regular.ttf", true);

// Set up data bindings to synchronize application data.
if (Rml::DataModelConstructor constructor = context->CreateDataModel("animals"))
{
constructor.Bind("show_text", &my_data.show_text);
constructor.Bind("animal", &my_data.animal);
}
// Set up data bindings to synchronize application data.
if (Rml::DataModelConstructor constructor = context->CreateDataModel("animals"))
{
constructor.Bind("show_text", &my_data.show_text);
constructor.Bind("animal", &my_data.animal);
}

// Now we are ready to load our document.
Rml::ElementDocument* document = context->LoadDocument("hello_world.rml");
document->Show();
// Now we are ready to load our document.
Rml::ElementDocument* document = context->LoadDocument("hello_world.rml");
document->Show();

// Replace and style some text in the loaded document.
Rml::Element* element = document->GetElementById("world");
element->SetInnerRML(reinterpret_cast<const char*>(u8"🌍"));
element->SetProperty("font-size", "1.5em");
// Replace and style some text in the loaded document.
Rml::Element* element = document->GetElementById("world");
element->SetInnerRML(reinterpret_cast<const char*>(u8"🌍"));
element->SetProperty("font-size", "1.5em");

bool exit_application = false;
while (!exit_application)
{
// We assume here that we have some way of updating and retrieving inputs internally.
if (my_input->KeyPressed(KEY_ESC))
exit_application = true;
bool exit_application = false;
while (!exit_application)
{
// We assume here that we have some way of updating and retrieving inputs internally.
if (my_input->KeyPressed(KEY_ESC))
exit_application = true;

// Submit input events such as MouseMove and key events (not shown) to the context.
if (my_input->MouseMoved())
context->ProcessMouseMove(mouse_pos.x, mouse_pos.y, 0);
// Submit input events such as MouseMove and key events (not shown) to the context.
if (my_input->MouseMoved())
context->ProcessMouseMove(mouse_pos.x, mouse_pos.y, 0);

// Update the context to reflect any changes resulting from input events, animations,
// modified and added elements, or changed data in data bindings.
context->Update();
// Update the context to reflect any changes resulting from input events, animations,
// modified and added elements, or changed data in data bindings.
context->Update();

// Render the user interface. All geometry and other rendering commands are now
// submitted through the render interface.
context->Render();
}
// Render the user interface. All geometry and other rendering commands are now
// submitted through the render interface.
context->Render();
}

Rml::Shutdown();
Rml::Shutdown();

return 0;
return 0;
}
```
Expand Down

0 comments on commit a903d8f

Please sign in to comment.