Sciter 2.0.0.12

Just published Sciter 2.0.0.12 SDK that is available at terrainformatica.com/sciter/sciter2-tech-preview.zip.

What’s new in the build:

• Demos:
• bin/layered.exe (sdk/demos/layered) demonstrates use of WS_EX_LAYERED windows. That is about windows of non-rectangular shapes. W7 has better support of such windows so even animations are feasible on such windows. Just run the demo to see.
• CSS features:
• New layout method: flow:row(tag1,tag2) – that is a variation of flow:grid | "template" that allows to define grid-alike layouts when number of rows is unknown upfront. For example list of info items on the screen shot above is defined as:

<dl #info>
  <header>Sciter</header>
     <dt>version:</dt>        <dd #version>...</dd>
  <header>System</header>
     <dt>OS type:</dt>        <dd #os-type>...</dd>
     <dt>OS version:</dt>     <dd #os-version>...</dd>

     ...
</dl>

and styled simply as flow:row(dt,dl) to replace <dt>/<dd>s in grid rows.

• The design of font-rendering-mode property is finalized and now it looks as this:

font-rendering-mode: snap-pixel | sub-pixel;

Default value is sub-pixel and it is an inheritable property. For large fonts and fonts in elements under 2D transforms look better when rendered in sub-pixel mode. Normal and small UI fonts are better readable in snap-pixel mode.

• Core changes:
• flow:text layout module ( used to render text block containers like <p> ) was rewritten from a scratch. Previously I was using IDWriteTextLayout for that but was forced to get rid of it. IDWriteTextLayout has no means to support things like floats (require "jagged" text boundaries) and text-align:justify.
• So now the engine passes all floats related tests from W3C CSS test suite.
• List of intrinsic behaviors supported so far:
• buttons:
• behaviror:button  attached to <input type=button> and <button>;
• behavior:clickable – focus-less buttons like toolbar buttons, etc.
• behaviror:check  attached to <input type=checkbox> and <button type=checkbox>;
• behavior:radio attached to <input type=radio> and <button type=radio>;
• behavior:switch – flawor of behavior radio but activation happens on MOUSE_DOWN rather than on MOUSE_UP, used for tabs alike containers.
• behavior:hyperlink – attached to all elements having href DOM attribute, including <a>.
• date and time:
• behavior:calendar – shows month/year/century calendar. Attached to <input type=calendar> and <widget type=calendar>.
• behavior:date – date input with popup calendar, <input type=date>
• behavior:time – time input <input type=time>.
• edits:
• behavior:edit – text input, <input type=text>;
• behavior:password – password input, <input type=password>;
• behavior:textarea – multiline input, <texarea>;
• behavior:number – numbers (integer or decimal) input element, <input type=number>;
• behavior:integer – integer number input element, <input type=integer>;
• behavior:decimal – decimal number input element, <input type=decimal>;
• behavior:masked-edit – masked input element, <input type="masked" mask="...">
• behavior:slider
• selects:
• behavior:select – single select list, <select size=2,3,...>, <select type=select>;
• behavior:select-multiple – multi-select list, <select size=2,3,... multiple>, <select type=select multiple>;
• behavior:select-checkmarks – multi-select list, <select size=2,3,... multiple=checkmarks>, <select type=select multiple=checkmarks>;
• behavior:tree – single select tree, <select type=tree>. Select with <option>s containing other <option>s;
• behavior:tree-checkmarks – multi-select tree, <select type=tree multiple=checkmarks>;
• menus:
• behavior:menu-bar – menu bar;
• behavior:menu – context/popup menu;
• behavior:popup-menu – button with popup menu <button type="menu" menu="css selector">;
• behavior:popup-selector – button with popup menu list, <button type="selector" menu="css selector"> ;
• indicators:
• behavior: progress – progress bar, <progress>, <meter> elements.
• gestures recognition:
• behavior:swipe – recognizes swipe gestures and generates BEHAVIOR_EVENTS::SWIPE / Event.SWIPE events.
• frame/form:
• behavior:frame – the behavior behind <frame>. Used for loading other documents inside elements thus to support DOM elements with "foreign" DOM sub-trees;
• behavior:history – navigation history in system of <frame>s;
• behavior:frame-set – that is just a handler of containers with splitters, by default attached to <frameset cols=...> and <frameset rows=...>;
• behavior:form – the behavior behind the <form>. Form here is a "submitable/resetable" collection of input items. Note: behavior:form can be  assigned to any container. Value of the form is collection(map) of name/value pairs – names and values of input elements.