Is it possible to define a small subset of HTML and css and use servo as a generic layout engine for that?

[parrotcar00]

I just learnt that one of the motivating factor behind Flutter framework (with Dart) from Google was to basically building HTML webapps except if we didn't have the baggage of backwards compatibility in HTML and CSS and so they wrote their own layout engine for that.

Is it possible to define a subset of css and html and recompile servo to only support that? Sort of like using servo as a generic layout engine.

[SimonSapin]

In short: no. Today’s Servo doesn’t do this, and there is no plan to add such a thing.

“A subset of CSS and HTML” could mean anything. Presumable you want to define some useful subset. What are the less-useful parts to remove? What is gained by removing them? Note that if it’s actually a subset (rather than something that only looks similar on the surface) then that doesn’t really help with “the baggage of backwards compatibility”.

And, reading between the lines, I assume that by “a subset of CSS and HTML” you mean no JavaScript. But in Servo the DOM (the data structure that represents an HTML tree after parsing, which is necessary to render HTML even if there’s no JS in that particular document) is based on the SpiderMonkey’s garbage collector. So Servo without JS would requires significant changes that we’re not planning to make or maintain.

[parrotcar00]

Ok that answers my question. I was basically wondering if I could define my own markdown like syntax which is very limited in theory and then use servo as a layout engine library to render this custom format. Looks like that's not quite possible with servo. How much work would it be to modify servo to fit this need?

[SimonSapin]

to modify servo to fit this need?

What is the need exactly?

You can take Markdown, convert it to HTML with any of the existing Markdown implementations, and render it with “full” Servo. If something less than full Servo is desirable, what exactly? And why?

[parrotcar00]

My use case was of defining a custom Markup, say something like

<DocumentTitle>my document title</DocumentTitle>
<CustomBinaryData1>..path...to.some custom binary data</CustomBinaryData1>
<CustomBinaryData2>..path...to.some custom binary data</CustomBinaryData2>

Say I had a custom markup format like above which I wanted to define how to render. Further, I wanted to create documents strictly in this format and display them offline, not inside the browser, basically using servo to render my custom markup format. In the future, I could add more tags and define how to render them.
Something like the above was the use case I had in my mind.

[pshaughn]

You'd have to fork Servo and modify it considerably to avoid compiling features, but since you'll be controlling both the HTML and the application embedder, you should be able avoid actually invoking any features you don't want invoked. You could translate your markup into some very plain HTML with a fixed stylesheet and let Servo lay it out from there.

[cztomsik]

@parrotcar00 I'm doing something like that but it's not prod ready yet. It is:

• (native) module for node.js
• re-implements subset of DOM, including events (in typescript)
• currently uses yoga for flexbox layout but I'd like to try stretch too and maybe even expand that a bit to support blocks at least
• everything is rendered directly using opengl using very little abstractions & overhead

https://github.com/cztomsik/graffiti

I was also thinking about factoring layout out of servo (so I'd be able to use it), but I think it's too coupled to the rest of the project so yoga/stretch is better for now.

---

BTW: it's currently meant to be used with react or other frameworks but from what you've shown, you'd just need to:

• define custom elements for your markup (this is not supported yet but it's something I've been thinking about)
• load markup somehow (for example with cheerio)
• build the DOM from the parsed AST (just walk the cheerio nodes & create respective DOM nodes)

I think the loading part could be < 100 lines of js.

Alternatively, you could use htm to parse & react to render, that could work too and it would be just few lines.

[parrotcar00]

@cztomsik graffiti looks really interesting. Looking at it, I now so wish there were a basic guide on how to go about building a very basic layout engine on the internet somewhere.

Please let me know if you decide to write a simple series(single?) writeup using graffiti as an example on how to build a basic layout engine, sort of like a hello world for a layout engine.

I'll go ahead an play with graffiti for now.

P.S: I think I would even pay for a udemy learning course that does a small walkthrough of how to build a basic layout engine, something which looks very fascinating from far but which I don't have much insight into how it works.

Thanks for showing graffiti.

[cztomsik]

If you're interested just in layout, you could have a look here:
https://github.com/servo/servo/commits/master/components/layout/flex.rs
https://github.com/facebook/yoga/tree/master/yoga
https://github.com/vislyhq/stretch

here's something related too:
https://github.com/litehtml/litehtml
https://github.com/maps4print/azul

About writing/doing a course:

• I'd love to but my english is too lame to make it enjoyable
• most of my free time goes to the development, so it's unlikely :-/