In the above comment i was trying to write about html BR which is removed as TRIM function is doing, being removed from the front or end of a TD or BODY for instance. Is its any way to work around (to keep the BR space or empty P at the start or at the end) ?

Again about rich edit control. or or seems to be removed in a Trim like manner on save. <table>...</table> will become just <table>...</table>. Just the same seems to happen with empty <p />. So in case I press some Shift+Enter or just Enter, the or <p></p> appear in saved html. If I Load and Save a few times (in richedit sample), without any changes, the breaks are just removed. Is it any possibility to avoid that? In several situations, people use the break for vertical spacing...

Well, the approach I've explained above works for H-SMILE core that is inside HTMLayout and Sciter engines. It mostly is not applicable to conventional browsers.

In H-SMILE all input elements (except of <richtext>) are made of plain DOM elements so are styleable as any other elements.

Moreover, each input element gets its functionality through CSS using behavior property. For example the select is defined as:

select {
  behavior: select-dropdown;
}

The behavior is a native class - set of functions that handle attachment/detachment ,input events and change state of DOM element(s) accordingly.

Upon assignment the behavior_select_dropdown class initializes DOM tree of the <select> element as this:

<select>
  <caption>...</caption>
  <button />
  <popup>
     <option>1</option>
     <option>2</option>
  </popup>
<select>

And CSS does the rest.

Any behavior can be assigned to any element. For example you may want to define something like this:

#grid td:nth-child(3) {
  behavior: select-dropdown;
}

then third column in the #grid will behave as dropdown-select input element. With proper styling of course.

Input elements in conventional browsers are "black boxes" - their parts are not DOM elements strictly speaking. And yet, behaviors of input elements and their styling are not specified anywhere in W3C specs.

So that bug you've created is not a bug actually for two reasons:

1. Input styling is deliberately unspecified. So browsers are free to do whatever they want. And so to ignore any styling you define.

2. You are trying to use vertical-align:middle; in very wrong way. For display:inline-block elements vertical-align defines vertical position of the element itself inside line box. But not vertical alignment of element's content.

But for display:table-cell elements vertical-align defines content alignment.

In general alignment as an entity is badly designed in CSS spec. If term 'design' is applicable for this case at all.

Yes, I was working with dom-attached elements. Changing that solved the problem.

Now I have a different problem: While checking/unchecking checkboxes in widget (has checkmarks attribs) I receive notification only for checking (SELECT_SELECTION_CHANGED). I need to be notified for uncheck also. It;s there a behavior that needs to be used ?

Thanks

Hello Andrew,

Sorry for necroing this thread, but I think its very releavant still today. As you can see some aspects of styling the <select> is considered as a bug and it is well and alive:
https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Your solution does indeed work in browse.exe, however it does not work in any other browser that I've tried.
In Firefox for example you'd need to style some strange thing called the shadow DOM:
http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#ranges-and-selection

To access and modify these shadow styles, special selectors are needed. As you can see someone has tried that before:
http://lab.simurai.com/css/umbrui/

But unfortunately they didn't use the <select> input element, so I don't know how to do it with that.
My reason to try to style the <caption> is explained in the bug that I filed here:
https://bugzilla.mozilla.org/show_bug.cgi?id=724316

Here you can see these examples to my problem:
1.
How can I get vertical-align to work on <caption>?
http://jsfiddle.net/CwSuA/
2.
How can I move the <caption> text to the top left corner?
http://jsfiddle.net/jXhRD/

If you know the answer in Firefox, please let me know.

Thank you and best regards,
Ed

You can experiment with this in Sciter:

<html>
  <head>
    <title></title>
    <style>

      widget { size: 100px *;}

    </style>
    <script type="text/tiscript">

    var tree = $(widget[type="tree"]);

    $(button#add).onClick = function()
    {
      var group = new Element("option","Dir2");
      // tree.append(group); // case #1, append is not desired here.       

      group.append(new Element("option","Sub2Dir1"));
      group.append(new Element("option","Sub2Dir2"));
      group.append(new Element("option","Sub2Dir3"));

      tree.append(group); // case #2, better, sub-tree is added as a whole here.
    }

    </script>
  </head>
<body>
 <button #add>Add</button>
 <widget type="tree" checkmarks=""  treelines="">
	<option expanded="true" >Dir
		<option >SubDir1</option>
		<option >SubDir2</option>
		<option >SubDir3</option>
	</option>

</body>
</html>

Note where tree.append(group); is defined. I suspect that you have something close to case #1, right?

I'm adding items (options) dynamically to a tree.

<widget type="tree" checkmarks=""  treelines="">
	<option expanded="true" >Dir
		<option >SubDir1</option>
		<option >SubDir2</option>
		<option >SubDir3</option>
	</option>

The problem is that, dynamically added options (via htmlayout::dom::element::append) are not shown. Only the root item is visible (without [+]). After some time if I dbl-click on the left of the checkbox (where the [+] should be), the [+] and sub-items are shown. But same story continues for sub-items...

If I let some options in the .html there are shown fine from beginning.
If get html of the widget after adding options dynamically, save on drive and open in browse.exe works fine.

There is some kind of refresh that should be called after widget update ? I have tried .update but doesn't help.

thanks

When you do dom::element::append on some container the engine is not doing layout immediately. It rather queues the updates.
But the most efficient way of appending rows to table is by using set_html() as it does DOM modification in transaction manner.

In any case you should try both approaches as layout/styles can affect the speed.
Elements with overflow:hidden|scroll|auto and with width/height set to not auto/intrinsic values are so called layout roots - change inside does not affect the rest of the tree. As closer such layout root in parent chain - the better.

Function dom::element::find_all uses standard CSS selectors that are defined in CSS spec.

The only exception is interpretation of :root. In find_all it designates the element the function is called with - root of the look up.

Try this:

<html>
  <head>
    <style>
      li:not(#one) { color:red; }
    </style>
  </head>
<body>
  <ol>
    <li #one>one</li>
    <li>two</li>
    <li>three</li>
  </ol>

</body>
</html>

I need to append a large number of rows to a table dynamically, via dom::element::append. I am currently adding items one-by-one, but they may be few hundred items so I will change code to adding in blocs.

How can I optimize this process ?. Ex: stop htmlayout from computing size /updating interface after each call, and compute only once at the end via dom::element::update.

There are other tips that can improve this process ?

Hi,

where can I find documentation regarding the format of dom::element::find_all parameter ?.

I want to select all child elements that does not have an attribute (id)

These days I am quite busy in incorporating in a application a simple, yet powerful HTML editor based on htmlayout richeditor.
I have following remarks/questions.

1. Occasional AV on pasting in browse exe, for instance HTMLayout page (http://www.terrainformatica.com/htmlayout/main.whtm) copied in clipboard from Chrome, hanged the application. Some other AV were triggered by some accidental select-and-drag operation in the widget.

2. Horizontal bar is not updated as expected. To see, replace in your richtext editor sample, the initial contents of the richtext

<p>Hello world!</p>

with something like

<table border="1" width="1000"><tr><td>Hello World!</td></tr></table>

The expected overflow behavior, either scroll or auto does not calculate the area as 1000 as I expect or as HTMLayout does.

3. Rulers are for information only purposes? The resize arrows do not update in any way the referenced contents. Or rulers are just for information and selection purposes? In this case the cursor is more appropriate to be settled to default.

4. Are they any possibilities in changing rulers colors? or richtext widget default large margin? With other words, do I have access to any dom component of the widget?

5. About the stack list of the current objects. Can I setup the bar to select the elements? Are they any possibilities in exploring the current objects and settle extra attributes? As the inserted table showed above, can I set the width by style or by changing width attribute? For me would be great to be (programatically) able to change the attribute of the last element from the stack, except when multi selection makes no sense in applying it. Idea is to be able to set, for instance, the width and height of an inserted image, the table columns/rows, to add extra attributes, etc.

thank you

yes, that was the problem.

thanks Andrew

Event SELECT_STATE_CHANGED is generated by behavior:select and TABLE_ROW_CLICK by behavior:grid (behavior_grid.cpp in SDK).

What kind of behavior is attached to your table?

I have a list (implemented as table) and I need to be notified when selected
row has changed (I'm interested in getting selection, not losing it)

I was expecting to receive a SELECT_STATE_CHANGED or TABLE_ROW_CLICK but
instead i receive two events : 0x8001 and 0x1 for the table element and none
for row.

How can I get those notifications ?

Thanks

Great Andrew. The last library worth to replace, htmprint handles drawing behavior, which is perfect for me. Took me a while to understand that for <img> touched by my custom draw behavior (for dual screen - standard html - render AND print) it displays always the default drawing. I was handling DRAW_CONTENT stage, while IMG seems is handling painting in DRAW_FOREGROUND stage, so always the raster image was painted in top of my custom drawings :).

Thanks again.
BTW, using a pdf printer, the output is stunning now

class PrintEx is derived from htmlayout::notification_handler:

class  PrintEx:
       public htmlayout::notification_handler<PrintEx>
{
  HTMPRINT                hPrint;
  ...

that means it is handling HLN_ATTACH_BEHAVIOR requests for document/elements loaded in it.

So answer is "yes".

Hi Andrew. Is it HTMPrint able to handle custom draw behavior? Some time ago it was not possible, but you mentioned that you may consider that. I use to render directly on hdc by using the custom draw behavior so would be great to be able to print in high resolution as well.
I have to say I am using an old version of htmlayout which was stable and good for my purposes, on which several changes were made (on the headers) in order to fit in my environment. Switching to latest library would make sense if HTMPrint would support custom draw behavior.

Using bitmap is a bit strange way of rendering to pdf to be honest.
The best way is to use PDF print driver.

Otherwise you should use bitmaps of significantly larger resolution. This way you will be able to achieve something close to printer DPI (300 dpi at least).

HTMPrint was not designed for screen pixel output. Because of scaling GDI may drop some lines as it does not support antialiasing.

Technically I can do direct PDF generation (in its vector form) but this feature is not included in the engine.

Please can you advise me how i can use HTMPrint functions to produce
screen independent output, but with adjustable scaling

I use Bitmap hdc to render output.

Let me explain, what goal I am pursuing...

We use htmprint functions to export HTML formatted text to PDF.

And we offer user two quality modes:

1) Draft
2) High quality

In draft mode my HTML is rendered on Bitmap with scale 100%...
And then this bitmap is exported to PDF...

In high quality mode my HTML is rendered on Bitmap with scale 300%...
And then exported.

Because PDF is hardware independent format, i want that my output will be
screen independent... So that screen resolution will not affect output...

And what is happening now.

We render HTML (f.e. the table, coded above) on bitmap.

For example we are using draft mode.

If screen resolution is 96 dpi table rendered by HTMPrint at 100% scale is the same as HTMLayout output on screen. And this is OK. Exactly what we need.

But if screen resolution is 120 dpi, the HTML table rendered at 100% become
smaller then in first case. As it rendered effectively at 80% scale.
And some cell or table border lines are lost because the effective scale smaller then 100%...

How to avoid this?

sorry, my fault.

by using:

HTMLayoutLoadHtmlEx
HTMLayoutSetCSS

and passed into a different baseUrl, then HLN_LOAD_DATA will be invoked again.

ATTEN: the baseUrl must be ended with a '\' path postfix, otherwise it won't work.

I want to implement some changable skin effect in my app. However, all my resources are all restored in Database.

So, I call HTMLayoutLoadHtml to load pages, and handle the on_data_loaded(HLN_LOAD_DATA event) method to load resources, such as html(included), css, images, etc.
All above is OK.

Then I attempt to change the css by call: HTMLayoutSetCSS, nothing seems happened. I hope the on_data_loaded will be invoked again, but it won't.

================================================================
However, if the resources are disk files in some folder, then by using:

HTMLayoutLoadHtmlEx(...., baseUrl);
HTMLayoutSetCSS(..., baseUrl);

the skin will be changed.

I really wondered how it works and not. Please help.
Thanks.

Thanks, by using the ActiveXContainer and site from http://www.codeproject.com/KB/atl/WindowlessMedia.aspx, I've successfully implemented a behavior, which draw flash directly onto the main window, together with other DOM elements.

Hello,

while '.box2's red color is correct when rendered (#ff0000, you can see this with a color picker), '.box's color will be #fe0000, because of the border radius (antialiasing algorithm maybe?).

This is problematic when I use white borders on white backgrounds to animate border display as you suggest somewhere in your documentation. When the div has border radius, the border is no longer a true white on the white background, so it is still barely visible.

Since I use this border on an <option> element inside the list, when the list is populated with numerous elements, it ends up having quite a lot of barely visible horizontal stripes. Very unsightly.

Below is a simple reproduction case. Thanks.

<html>
  <head>
    <style>
      .box
      {
        border: 1px solid #ff0000;
        border-radius: 3px;
      }
      .box2
      {
        border: 1px solid #ff0000;
      }
    </style>
  </head>
  <body>
    <div class="box">box</div>
    <div class="box2">box2</div>
  </body>
</html>

Hello Andrew,

I'm trying to implement my own async (e.g. 'in-another-thread') resource loader.
What I'm doing right now is this:

a. start a new thread in OnLoadData and return LOAD_DISCARD
b. in the thread started in a., load the file's contents as bytes and, when loaded, call HTMLayoutDataReadyAsync with HLRT_DATA_IMAGE as resource type.
c. although the call to HTMLayoutDataReadyAsync returns TRUE, the image is not displayed

Am I doing something wrong?

we are accessing HTMLITE from multiple threads.
we do not modify anything - just reading.
should we rather lock it?

Thank you! Very much appreciated.

Hy Andrew, sorry for bothering again, but do you have any suggestions on this?

Thanks. I've made similar steps, but in BCB6 for HTMLayout there are some differences:
1. In aux-cvt.h in class itoa "_itoa" function call should be replaced by ::itoa
2. In htmlayout_aux.h builder get errors in following constructions:
unsigned char(...)
should be replaced by
(unsigned char)(...)
3. In htmlayout_controls.hpp builder get errors when dom::element objects calls find_all, find_first. I replaced them by find_all<char> and find_first<char>
4. In Defines I added STRICT for notification_handler::setup_callback overloaded function in htmlayout_notifications.hpp

The fix will be available in the next build.

Next version - yes. Next build - no.

There is no font-face property in CSS but font-family is there.
Simply change it to font-family and your samples should work.

Almost forgot: put __MFC_COMPAT__ and STATIC_LIB in your Defines.

I’ve struggled with this a week ago. Tried a couple of different approaches: using Delphi wrapper I found here on the forums, mapping each function from HTMLayout.DLL with GetProcAddress, etc … But at the end, with Andrew’s kind help, I finally did it the right way.
I’m using Sciter with C++ Builder 2007, but it should be basically the same with HTMLayout and any other version of BCB. So here it is:

1. Get coff2omf.exe from your BCB \bin folder and convert sciter-x.lib like this:

coff2omf.exe -lib:ms sciter-x.lib sciter_borland.lib

2. Create new folder for your project
3. Copy api folder from Sciter SDK to your projects folder
4. Copy your new sciter_borland.lib to your api folder
5. Open BCB, create new VCL Forms app and save it to your project folder
6. Compile the project
7. Put sciter-x.dll in created Debug folder
8. Open aux-cvt.h file from api folder in any text editor
9. Change _stricmp (line 484) to stricmp
10. Change wcsicmp (line 492) to _wcsicmp
11. Open sciter-x-dom.h file from the api folder
12. Add #include <algorithm>
13. Change min (line 1440) to std::min
14. Add sciter_borland.lib to your project
15. Add #include "sciter-x.h" in your main unit
16. Implement following method:

void __fastcall TForm1::WndProc(TMessage &Msg)
{
BOOL handled = false;
LRESULT lr = SciterProcND(this->Handle, Msg.Msg, Msg.WParam, Msg.LParam, &handled);

switch(Msg.Msg)
{
case WM_CREATE:
{
SciterLoadFile(this->Handle, L"../GUI/UI.html");
break;
}
}

TForm::WndProc(Msg);
}

Where UI.html is your GUI markup definition.

17. Compile and run the project.

Hope it helps.