From a903d8f724b5c829cb3840f4b062286b242d7f6a Mon Sep 17 00:00:00 2001 From: Michael Ragazzon Date: Sun, 29 Sep 2024 17:46:42 +0200 Subject: [PATCH] Update readme and changelog --- changelog.md | 68 +++++++++++++++++-- readme.md | 182 ++++++++++++++++++++++++--------------------------- 2 files changed, 149 insertions(+), 101 deletions(-) diff --git a/changelog.md b/changelog.md index e3f1d6a72..26950eba0 100644 --- a/changelog.md +++ b/changelog.md @@ -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. @@ -46,7 +95,7 @@ The gradients support most of the CSS features and syntax, including angle and ` - Decorators can now take an extra keyword `` 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. @@ -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. @@ -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) @@ -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. @@ -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) @@ -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). diff --git a/readme.md b/readme.md index c2f866d5f..9620351b0 100644 --- a/readme.md +++ b/readme.md @@ -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. @@ -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="/scripts/buildsystems/vcpkg.cmake" @@ -196,15 +193,15 @@ This example demonstrates a basic document with [data bindings](https://mikke89. ```html - Hello world - - + Hello world + + -

RmlUi

-

Hello world!

-

The quick brown fox jumps over the lazy {{animal}}.

- +

RmlUi

+

Hello world!

+

The quick brown fox jumps over the lazy {{animal}}.

+ ``` @@ -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; } ``` @@ -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(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(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; } ```