Pixie: A lightweight HTML/CSS rendering engine for Free Pascal and Lazarus 🌟

[Wallaby]

Recent commits have addressed any problems I had with excessive vertical spacing. See attached.
Good job!

Yeah, I keep finding obscure bugs.

Moral of the story - don't ever try building your own browser, even a simplified one, the complexity is higher than it initially seems :-D

[440bx]

the complexity is higher than it initially seems :-D

It's like objects in the mirror, they are always closer than they seem.

[dsiders]

Yeah, I keep finding obscure bugs.
Moral of the story - don't ever try building your own browser, even a simplified one, the complexity is higher than it initially seems :-D

It's like the whole thing is one giant quirks mode.

[zeljko]

Will you add support for Lazarus Qt (qt4) there shuold be no to much diff between qt4 and qt5 ?

It's not hard, just a few defines, but Qt4 reached EOL 10 years ago - anyone still using it?

Yes, it is still used

[AlexTP]

@dsiders

any problems I had with excessive vertical spacing.

Guess who reported it in the Gitlab...
https://gitlab.com/retrofoxed/pixie/-/work_items/35

[dsiders]

@dsiders

any problems I had with excessive vertical spacing.

Guess who reported it in the Gitlab...
https://gitlab.com/retrofoxed/pixie/-/work_items/35

I'm sure I have a virtual participation trophy around here somewhere. I'll send it to you.

[Fred vS]

Excellent project!

Is Pixie reserved for Lazarus/LCL or can fpGUI/MSEgui also use it (and how?)

[dsiders]

Quick question about scroll bars...

The scroll bar area is being drawn over top of the content area instead of adjacent to it. Is this by design - or a bug? I changed the size, color, and opacity of the scroll bar to demonstrate. The attached show the control with 4px and 12px scroll bar widths. The scroll bar obscures the underlying content.

Let me know if I need to add it to the issue tracker.

[AlexTP]

It is by design of course. To bugtracker? As a feature request for the non-overlapping bar? I like the idea.

[ginoo]

I have a dream, to put LCL controls inside a pixie document

That's not really possible - a completely different architecture.

What you want is probably the Fresnel project, but it's in early stages of development.

I think that to create something nice, it would be enough to anchor an LCL control to a div. That is, if you resize a form, the anchored control is automatically moved and resized. I think you can create something nice with just a little effort.
It's my idea, I hope it's a good one.

[Wallaby]

The overlay scrollbar is a design choice — Firefox does the same (scrollbar floats over content), while Chrome shifts the content area. It keeps the layout width consistent regardless of whether content overflows.

That said, I've just added three scrollbar visibility modes via `Scrollbar.Visibility`:

- `svShow` — always visible when content overflows
- `svHide` — never shown (wheel/keyboard scrolling still works)
- `svAuto` — appears on scroll or hover near the right edge, fades out after 500ms (this is now the default)

If you need a completely different scrollbar (e.g. a native LCL one like TATScrollbar), set `Scrollbar.Visibility := svHide` to suppress the built-in one, then use the `ScrollY`, `ContentHeight`, and `OnScrollChanged` properties to wire up your own. For example:

Code: Pascal  [Select][+][-]

1. PixieHtmlView.Scrollbar.Visibility := svHide;
2.  
3. // In your external scrollbar's OnChange:
4. PixieHtmlView.ScrollY := MyScrollbar.Position;
5.  
6. // In PixieHtmlView.OnScrollChanged:
7. MyScrollbar.Position := Round(PixieHtmlView.ScrollY);
8. MyScrollbar.Max := Round(PixieHtmlView.ContentHeight);
9.  

[AlexTP]

@retrofoxed
I am interested how many people, at SoftPerfect.com, work on this component? Fixes for 'issues' were very quick! So I guess at least 2-3 persons.

[Wallaby]

@retrofoxed
I am interested how many people, at SoftPerfect.com, work on this component? Fixes for 'issues' were very quick! So I guess at least 2-3 persons.

Actually it's just me and a clever AI - which indeed feels like having several people at your disposal. I have just pushed another commit and I believe now Pixie is production-ready:

Unified SVG Rendering Engine

Implemented a single, cross-platform SVG renderer that works identically across all supported backends — Windows (Direct2D), Linux (Cairo), macOS (CoreGraphics), Qt, Delphi FMX, and PDF export.

What changed:

Previously, each platform used its own native SVG handling — Windows relied on the Direct2D SVG API, FMX rasterised SVGs to bitmaps, and other platforms used their respective native libraries. This led to inconsistent rendering and limited gradient support.

Now, all platforms share one renderer that draws SVG content as native vector graphics through Pixie's own canvas API.

Benefits:

• Consistent output — SVGs render identically on every platform
• True vector rendering — no rasterisation, SVGs scale cleanly to any size
• Full gradient support — linear and radial gradients render correctly in all shapes, not just rectangles
• No external dependencies — no reliance on platform-specific SVG libraries (Direct2D SVG, librsvg, CoreSVG)
• PDF export — SVGs are embedded as vector Form XObjects, preserving full quality in print

[creaothceann]

Btw. does it do subpixel rendering? I'd think a native backend would do that automatically, but I could of course be wrong.

[Wallaby]

Btw. does it do subpixel rendering? I'd think a native backend would do that automatically, but I could of course be wrong.

Yes, all rendering goes through native platform APIs, so you automatically get subpixel text rendering (ClearType on Windows, LCD smoothing on Linux) and GPU acceleration where the platform provides it.