layoutfarm / htmlrenderer

C# HTML Layout and HTML Rendering Engine

Hello !

pic 1: HtmlRenderer, Gdi+, see test file

seems promising ?, NEARLY pass ACID1 test :)

---

Work In Progrss ... : Cross Platform HtmlRenderer

The HtmlRenderer example!

pic 2: HtmlRenderer on GLES2 surface, text are renderered with the Typography

pic 3: HtmlRenderer on GLES2 surface

also, please note the text selection on the Html Surface.

(HtmlRender => https://github.com/LayoutFarm/HtmlRenderer,

Typography => https://github.com/LayoutFarm/Typography)

---

How to build it

see https://github.com/LayoutFarm/HtmlRenderer.Build

---

Work In Progrss ... : Html-input

Html input elements are built with 'html-fragment (sub dom)'

see more at #18

pic3 : HtmlRenderer on GLES2 surface,developing Html-input, click to view full size img

---

The classic image.

pic 4: HtmlRenderer's Classic, Gdi+

MORE info / screen capture imgs -> see wiki

Build Note -> see wiki

---

I forked this project from https://github.com/ArthurHub/HTML-Renderer (thank you so much)

I added some features

such as

1. dynamic html dom

2. decoupling, dependency analysis

3. optimizing the html,css parser. see: HtmlKit v1.0(https://github.com/jstedfast/HtmlKit)

4. add svg/canvas support (not complete)

5. abstract canvas backend (GDI+, OpenGL) also not complete for Linux (for the canvas backend, I used it from another project ->https://github.com/prepare/PixelFarm-dev)

6. Javascript (v8) binding (https://github.com/prepare/Espresso)

7. debug view

8. more layout support eg. inline-block,relative, absolute ,fixed, flex etc

9. added custom controls eg. text editer control, scrollbar, gridbox etc.

10. some events (eg. mouse /keyboard events)

.. BUT not complete :(

feel free to fork/ comment/ suggest /pull request

---

Plan

1. always permissive license (MIT,BSD, Apache2)

2. bind some features from Blink engine

3. add more html5/css3/js support

4. convert to C++ code with some transpiler tools so users can build a final native code web browser

5. to make this runs on .NetCore

---

Licenses

The project is based on multiple open-sourced projects (listed below) all using permissive licenses.

A license for a whole project is MIT.

but if you use some part of the code please check each source file's header for the licensing info.

Html Engine

BSD, 2009, José Manuel Menéndez Poo, https://www.codeproject.com/Articles/32376/A-Professional-HTML-Renderer-You-Will-Use

BSD, 2013-2014, Arthur Teplitzki, from https://github.com/ArthurHub/HTML-Renderer

MIT, 2015, Jeffrey Stedfastm, from HtmlKit https://github.com/jstedfast/HtmlKit

Javascript Engine

MIT, 2013, Federico Di Gregorio, from https://github.com/Daniel15/vroomjs

MIT, 2015-present, WinterDev, from https://github.com/prepare/Espresso

Geometry

BSD, 2002-2005, Maxim Shemanarev, from http://www.antigrain.com , Anti-Grain Geometry - Version 2.4,

BSD, 2007-2014, Lars Brubaker, agg-sharp, from https://github.com/MatterHackers/agg-sharp

ZLIB, 2015, burningmine, CurveUtils.

Boost, 2010-2014, Angus Johnson, Clipper.

BSD, 2009-2010, Poly2Tri Contributors, from https://github.com/PaintLab/poly2tri-cs

SGI, 2000, Eric Veach, Tesselate.

Image Processing

BSD, 2002-2005, Maxim Shemanarev, from http://www.antigrain.com , Anti-Grain Geometry - Version 2.4,

MIT, 2009-2015, Bill Reiss, Rene Schulte and WriteableBitmapEx Contributors, https://github.com/teichgraf/WriteableBitmapEx

MIT, 2008, dotPDN LLC, Rick Brewster, Chris Crosetto, Tom Jackson, Michael Kelsey, Brandon Ortiz, Craig Taylor, Chris Trevino, and Luke Walker., from OpenPDN v 3.36 (Paint.NET), https://github.com/rivy/OpenPDN

Font

MIT, 2016-present, WinterDev, Samuel Carlsson, Sam Hocevar and others, from https://github.com/LayoutFarm/Typography

Apache2, 2014-2016, Samuel Carlsson, from https://github.com/vidstige/NRasterizer

MIT, 2015, Michael Popoloski, from https://github.com/MikePopoloski/SharpFont

The FreeType Project LICENSE (3-clauses BSD style),2003-2016, David Turner, Robert Wilhelm, and Werner Lemberg and others, from https://www.freetype.org/

MIT, 2016, Viktor Chlumsky, from https://github.com/Chlumsky/msdfgen

Platforms

MIT, 2015-2015, Xamarin, Inc., from https://github.com/mono/SkiaSharp

MIT, 2006-2009, Stefanos Apostolopoulos and other Open Tool Kit Contributors, from https://github.com/opentk/opentk

MIT, 2013, Antonie Blom, from https://github.com/andykorth/Pencil.Gaming

MIT, 2004,2007, Novell Inc., for System.Drawing

---

Long Live Our Beloved C#

WinterDev :)

htmlrenderer's Issues

Doesn't work on mono under Debian

The initial problems with the case of filenames
https://htmlrenderer.codeplex.com/workitem/9045
was fixed, but

There are more incomplete features:
https://github.com/prepare/HTML-Renderer/issues/9

Implement Css Grid

see http://www.w3.org/TR/css-grid-1/

CsQuery

make CsQuery works with our HtmlRenderer

implement MathML

https://www.w3.org/TR/MathML3/

and LayoutFarm/Typography#20

see also https://www.iso.org/standard/58439.html

Build instructions?

Hi - could you please add a few lines in README.md explaining how to build the project and sub-projects? Much appreciated!

Html5/Css3 Parser and Document Model

We separate parser/dom to new project -> LayoutFarm.WebDom
choices

1. use the parser in our style
2. interface with https://github.com/FlorianRappl/AngleSharp?
3. consider other libs?

ACID Test2

must pass 3 tests
Acid 1,2,3
http://www.acidtests.org/

Separate Layout and Rendering

In the way we approach Typography project

Notes on my intentions

Hello
@bjorn-ali-goransson,
and those who come from AngleSharp/AngleSharp.Css#2

If your code meet these ...

1. No copyleft code
2. Support .Net framework >=2.0
3. No Linq

It makes me easier to integrate your code back to my repo.

---

I also try to figure out
How to support more that 1 Html-Css Dom/Parser frameworks.

eg.

1. HtmlKit - that is used in this repo.
2. Pasta - my unfinished port of Google's Gumbo.
3. Radius - attempt the bring AngelSharp to the HtmlRenderer, not finish.

so lets create some abstraction.

Please don't throw other frameworks away :)

---

Feel free to create issues about the HtmlRenderer here.

class FontStore doesn't work with OpenGL

Size: 2304
System:
Linux

Initializing threaded X11: 1.
Display connection: 33744256, Screen count: 1
Detected configuration: Linux / Mono
Initializing threaded X: success.
Initializing threaded X: success.
Creating default GraphicsMode (24, 16, 0, 0, 0, 2, False).
Loaded assembly: /var/calculate/remote/distfiles/egit-src/HTML-Renderer/Source/Test1_CoreVisual_New/bin/Debug/MiniAgg.Complements.dll
System.TypeInitializationException: An exception was thrown by the type initializer for PixelFarm.Drawing.DrawingGL.MyCanvasGL ---> System.EntryPointNotFoundException: SelectObject
at (wrapper managed-to-native) Win32.MyWin32:SelectObject (intptr,intptr)
at PixelFarm.Drawing.WinGdi.BasicGdi32FontHelper.MeasureCharWidths (IntPtr hFont, System.Int32[]& charWidths, FontABC[]& abcSizes) [0x00025] in /var/calculate/remote/distfiles/egit-src/HTML-Renderer/Source/Deps/PixelFarm.Drawing.Platforms/PixelFarm.Drawing.Gdi/Implementation/MyFontInfo.cs:42
at PixelFarm.Drawing.WinGdi.MyFontInfo..ctor (PixelFarm.Drawing.Font f, Int32 lineHeight, Single ascentPx, Single descentPx, Single baseline, PixelFarm.Drawing.WinGdi.BasicGdi32FontHelper gdiFontHelper) [0x00065] in /var/calculate/remote/distfiles/egit-src/HTML-Renderer/Source/Deps/PixelFarm.Drawing.Platforms/PixelFarm.Drawing.Gdi/Implementation/MyFontInfo.cs:112
at PixelFarm.Drawing.WinGdi.FontStore.RegisterFont (System.Drawing.Font newFont, FontKey fontKey) [0x0009c] in /var/calculate/remote/distfiles/egit-src/HTML-Renderer/Source/Deps/PixelFarm.Drawing.Platforms/PixelFarm.Drawing.Gdi/Implementation/FontStore.cs:164

add css overflow-x, overflow-y

HtmlRenderer on OpenGLES

(pure hardware rendering1)
Render directly on the OpenGLES surface (without GDI+)
coordinate errors/ temp fix, snapshot.

HtmlRenderer: more SVG, Canvas support

plan : add features, use MiniAgg!

ACID Test1

must pass 3 tests
Acid 1,2,3
http://www.acidtests.org/

Skia Support

see https://github.com/mono/SkiaSharp

SkiaSharp surface ,
early preview,
I have some bugs to fix.

Big thanks goto migueldeicaza for his SkiaSharp and others on Skia and SkiaSharp contributors!

compare with current gdi+ surface

---

and this is acid1 reference on wikipedia

(from https://en.wikipedia.org/wiki/Acid1)

Make it runs on .NetCore !

Add support for SkiaSharp

see https://github.com/mono/SkiaSharp

Css3 Display Module

revisit
http://www.w3.org/TR/css-display-3/

add center positioning

add drag-drop features

Print to printer or pdf file

spec:
1.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/PDF32000_2008.pdf

from http://www.mactech.com/articles/mactech/Vol.15/15.09/PDFIntro/index.html
(Pdf1.3)

b closepath, fill,and stroke path.
B fill and stroke path.
b* closepath, eofill,and stroke path.
B* eofill and stroke path.
BI begin image.
BMC begin marked content.
BT begin text object.
BX begin section allowing undefined operators.
c curveto.
cm concat. Concatenates the matrix to the current transform.
cs setcolorspace for fill.
CS setcolorspace for stroke.
d setdash.
Do execute the named XObject.
DP mark a place in the content stream, with a dictionary.
EI end image.
EMC end marked content.
ET end text object.
EX end section that allows undefined operators.
f fill path.
f* eofill Even/odd fill path.
g setgray (fill).
G setgray (stroke).
gs set parameters in the extended graphics state.
h closepath.
i setflat.
ID begin image data.
j setlinejoin.
J setlinecap.
k setcmykcolor (fill).
K setcmykcolor (stroke).
l lineto.
m moveto.
M setmiterlimit.
n end path without fill or stroke.
q save graphics state.
Q restore graphics state.
re rectangle.
rg setrgbcolor (fill).
RG setrgbcolor (stroke).
s closepath and stroke path.
S stroke path.
sc setcolor (fill).
SC setcolor (stroke).
sh shfill (shaded fill).
Tc set character spacing.
Td move text current point.
TD move text current point and set leading.
Tf set font name and size.
Tj show text.
TJ show text, allowing individual character positioning.
TL set leading.
Tm set text matrix.
Tr set text rendering mode.
Ts set super/subscripting text rise.
Tw set word spacing.
Tz set horizontal scaling.
T* move to start of next line.
v curveto.
w setlinewidth.
W clip.
y curveto.

TABLE 1: PDF Page Markup Operators
(Note: Equivalent PostScript operators are in boldface.)

implement Box.GetLocationRelativeTo(Box otherBox)

2 boxes that linked together, may live in different host,

HAPPY NEW YEAR 2018 :)

add css selector engine

https://github.com/prepare/CsQuery

A few questions

I've managed to build and run the project, and have a few questions:

1. How can I turn off the wireframe lines?
2. When I run this on Windows, what rendering technology is it using, GDI, DirectX, or OpenGL?
3. I notice that you have your own Html and Css parsers. How do they compare to AngleSharp?

Thanks!

add ability to add custom elements

like ...

adds fastcoloredtextbox as control

review CssLayoutEngine.FlowRunsIntoHost() again

Build problems

Hi,
I am trying to build the project and I have many broken references and there are several projects unavailable. Is this guide still valid?
https://github.com/LayoutFarm/HtmlRenderer/wiki/3.-Build-The-Project

System.DllNotFoundException

Hello

I have this error I my widnows 10 when i tried to run the demo. VS2015 and VS2017:

System.DllNotFoundException occurred
HResult=0x80131524
Message=Unable to load DLL 'myft.dll': The specified module could not be found. (Exception from HRESULT: 0x8007007E)

Other thing could you write example to convert html to image? I need to render piece of HTML to image to be used in asp.net apps and i would like to use google fonts with link tag

I used before https://github.com/ArthurHub/HTML-Renderer but the HTML and css is poor for what I need

Cheers

PD:
Other:
System.TypeInitializationException occurred
HResult=0x80131534
Message=The type initializer for 'LayoutFarm.UI.UISurfaceViewportControl' threw an exception.
Source=
StackTrace:

Inner Exception 1:
TypeInitializationException: The type initializer for 'LayoutFarm.UI.UIPlatformWinForm' threw an exception.

Inner Exception 2:
BadImageFormatException: Could not load file or assembly 'PixelFarm.Drawing.Skia, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null' or one of its dependencies. An attempt was made to load a program with an incorrect format.

developing branch is on prepare/HTML-Renderer

This is an Active Repo :)

but the hottest developing branch is on prepare/HTML-Renderer
https://github.com/prepare/HTML-Renderer

CSSOM?

implement CSSOM?
see ...
http://dev.w3.org/csswg/cssom
https://github.com/NV/CSSOM

add Microsoft ChakraCore Js Engine

see https://github.com/Microsoft/ChakraCore

HtmlRenderder: Need Documentation

implement template, shadow dom, webcomponent

see ideas on ...
http://webcomponents.org/
https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Web_components
http://mozbrick.github.io/
http://customelements.io/
http://w3c.github.io/webcomponents/spec/shadow/
http://w3c.github.io/webcomponents/spec/custom/
https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

add css box-sizing

Developing Html Input

Html input elements are built with 'html-fragment (sub dom)'

pic1 : developing Html-input, click to view full size img

add some features from Blink

1. ONLY permissive license files!
2. add Blink TestCase suport

Please have a release that contains binaries

Downloadable already built "Any CPU" dll's

Win32.MyWin32:DeleteDC - EntryPointNotFoundException

Unhandled Exception:
System.EntryPointNotFoundException: DeleteDC
at (wrapper managed-to-native) Win32.MyWin32:DeleteDC (intptr)
at PixelFarm.Drawing.WinGdi.BasicGdi32FontHelper.Finalize () [0x00007] in /var/calculate/remote/distfiles/egit-src/HTML-Renderer/Source/Deps/PixelFarm.Drawing.Platforms/PixelFarm.Drawing.Gdi/Implementation/MyFontInfo.cs:20

add css3 flex model

ACID Test3

must pass 3 tests
Acid 1,2,3
http://www.acidtests.org/

Documentation Project:)

First I'm not a native English speaking person.
so you can correct it where it is wrong grammar/ wrong intention or not proper.

You CAN HELP ME create the topics that you want to know.
so I will create a description for it

:)

Simplify Html drag selection algo

Add Just Calculate and Layout Functions without Rendering to Canvas

No platform selection in the code of Demo project

https://github.com/prepare/HTML-Renderer/blob/master/Source/HtmlRenderer.Demo/Program.cs#L40

the platform can be checked as in this snippet:
http://stackoverflow.com/questions/5116977

private static bool IsLinux
{
    get
    {
        int p = (int) Environment.OSVersion.Platform;
        return (p == 4) || (p == 6) || (p == 128);
    }
}

repair HitTestOnPreviousChainHint()

add float box model

HtmlRenderer , Development Snapshot

GLES2 based-HtmlRenderer, early preview

---

pic 1: render with OpenGLES2, Text is rendering with PixelFarm's MiniAgg+ the Typography.

pic 2: render with GDI+ (System.Drawing)

HtmlRenderder: Add Pdf support

check minipdf, or pdfium

add webcomponents

pls add something to create custom elements that replaces own elements with fixed html like react or webcomponents