Graphin engine

May 25, 2007

Filed under: HTMLayout,Philosophy,Sciter — Andrew @ 3:16 pm

I have started Graphin.dll project – portable and compact graphics engine based on AGG (agg2d in particular).

Graphin url is code.google.com/p/graphin

API mimics Graphics and Image objects but in plain C. In principle this is close to the <canvas> from WHAT WG .

Graphin.dll includes also pnglib/zlib and jpeglib with the ability to load and save image object to/from byte vectors (and so mm files) as png/jpeg.

Intention is to have graphics engine that is portable and simple to use. With Graphin it should be possible to reproduce <canvas> functionality
in any language/environment.

There is nothing spectacular yet there but structure is established and couple of methods like graphics_rectangle, graphics_line, etc are written.

Graphin is based on agg 2.4 and contains that agg2d thing written by Maxim Schemanarev .

agg2d class was ported by Jerry Evans from agg 2.3 and contains fixes made by Maxim, myself and Pavel Korzh.

New members of the project are very welcome.

I am planing to use Graphin as graphics backend of multiplatform versions of htmlayout and sciter.

Update: here is a screenshot of Graphin Demo project.
Graphin Demo

Browser wars.

May 18, 2007

Filed under: HTML and CSS,Philosophy — Andrew @ 9:29 pm

Somewhere in this month discovered in logs of this site that total number of visitiors who use Gecko (FireFox and Mozilla) and Opera browers became first time larger than number of Internet Explorer users. Of course this site has specific auditorium but nevertheless…

CSS extensions in h-smile engine. Part II. Flex units.

May 4, 2007

Filed under: HTML and CSS,HTMLayout,Sciter — Andrew @ 4:21 pm

Flex length units are "weights" used in distribution of free space along some direction.

Example of the document with flex units:

<html>
<head>
  <style>
  div.outer
  {
    border:red 2px dashed;
    width:400px;
    height:250px;
  }
  div.inner 
  { 
    margin-left:30%%; width:50%; margin-right:70%%; 
    height:100%%;
    background:gold; border:brown 4px solid; 
  }
  </style>  
<head>
<body>

  <div class="outer">
    <div class="inner"></div>
  </div>
  
</body>
</html>

This document will be rendered in h-smile engine as:



As you see left and right margins of div.inner are distributed as 30:70 and they span whole free space left from width:50% and borders of the div.inner.


Key point here is distribution of free space. Computation of flex units happens as a last phase of layout algorithm – when container’s dimensions are known and all non-flex lengths were computed. Space left from fixed lengths will be distributed among elements and parts given in flexes.


Here is another example that demonstrates weighted distribution of heights:

<html>
<head>
  <style>
  div.outer
  {
    border:red 2px dashed;
    width:400px;
    height:250px;
  }
  div.inner1 
  { 
    height:1*;
    margin:4px;
    background:gold; border:brown 4px solid; 
  }
  div.inner2 
  { 
    height:2*;
    margin:4px;
    background:lightblue; border:navy 4px solid; 
  }
  </style>  
<head>
<body>
  <div class="outer">
    <div class="inner1"></div>
    Some text in between.
    <div class="inner2"></div>
  </div>
</body>
</html>

And its rendering:



As we see here heights of div.inner1 and div.inner2 are distributed using given 1:2 ratio (1* and 2*).


Notation of flex units


There are two equivalent forms of flex length notation: N%% and N*. These two forms are different by multiplier: 1* is exactly 100%%.


Computation details


If sum of flexes in the space that needs to be distributed is less than 100%% then some free space (remainder) will be left undistributed. If sum is equal or more than 100%% then all flex values are used as weights in distribution so all free space will be “covered by flexes”.


Nothing new under the sun


Idea of flex units for CSS was taken from HTML 4.0 relative length units . Flex units in N* notation are used there as values of cells dimensions. ( I do not know any html rendering engine that has this part of standard implemented though ).


XUL specification has also concept of flexes. Flexibility of widths (?) or heights(?) of elements in container is defined by the flex attribute.


Why flex’es are so good?



  1. Flex units allows to position elements with respect of other content on the page. For example if user will change base font size of the document then dimensions given in flexes will be recalculated accordingly. In principle design based on flex units will produce layout that is more stable to changes of platform dependent things – font sizes and types, screen sizes. etc.

  2. Flex units allows to position elements staying in static layout mode – without need of position:relative, absolute.

  3. Flex units significantly reduce need of use of tables or JavaScript code for layout purposes.