Mac OSX, DPI and font sizes mess

April 12, 2014

Filed under: HTML and CSS,Sciter,Web Application Techologies — Andrew @ 8:10 pm

Most of applications on Mac OS X use fixed 72 DPI settings despite of all these Retina and other high-DPI monitors. I understand that this is legacy we’ve got from last century. But c’mon, it is 2014 out there …

Even conventional browsers that supposed to handle scaling well by using CSS rules are failing to render simple things like:

  <div style="width:3in; width:3in; border:1px solid">
    is it 3 inch square?
  </div>

you will see everything but not 3 inches square here.

I am not getting what’s the problem to implement proper scaling. Here it is in Sciter on Mac:
DPI screenshot

Screenshot is taken on Mac with Dell UltraSharp U2711 monitor.

Sciter on Mac with native CoreGraphics backend

April 7, 2014

Filed under: Sciter — Andrew @ 12:36 pm

It is coming:

Sciter on Mac screenshot

Sciter on Mac

Core components are in pretty good shape, working on porting public API functions.

sciter-x.h will have all functions that use HWND refactored to use HWINDOW instead, that on Windows will resolve to HWND and on Mac OS X to NSView* (client portion of NSWindow).

Interactive script debugger in Sciter

March 14, 2014

Filed under: Sciter — Andrew @ 4:31 pm

I am adding interactive debugger feature to the inspector.dll (see Sciter SDK)
debugger

It allows to set breakpoints in scripts and supports basic step execution operations:

  • Continue
  • Step Into
  • Step Over
  • Step Out

It also contains basic variable inspection facilities.

Sciter on Mac with JUCE backend

February 21, 2014

Filed under: Sciter — Andrew @ 8:24 pm

Here is first screenshot of Sciter running on Mac.

Sciter on Mac

Sciter on Mac


I am using JUCE library created by Jules Storer as a backend here. JUCE also supports Linux, Android, iOS so I expect ports on these platforms to be available pretty soon too.

Here is the same document opened in S3 with native Windows backend. There are some differences in rendering details, working on them. Intention is to have rendering as close as possible but some differences will be there for sure, e.g. fonts are rendered differently and set of fonts is different on each platform.

Repeatable: simple jQuery plugin for rendering lists, tables, etc.

February 11, 2014

Filed under: Source code,Web Application Techologies — Andrew @ 11:22 am

While ago I’ve published simple and compact (90 lines of code) plugin for rendering, well, repeatables.

Here is its documentation and here is live demo.

The Repeatable is a mechanism of DOM population from array of objects. Repeatable template is defined directly in markup:

<ul id="people">
    <li><a href="mailto:{{this.email}}">{{this.name}}</a> <b if="this.age > 18">18+</b> </li> 
    <li>No data available</li>
</ul>

and that template gets cloned and instantiated for each record in the array.

Sciter on multihead system running Windows 8.1 with per monitor DPI settings.

January 3, 2014

Filed under: Sciter — Andrew @ 7:52 pm

High-resolution monitors are finally here. So you probably will get one attached to your desktop or notebook in nearest future. If so you may end with system having different monitors that will have different resolution. One with standard 96 dpi and another with, let’s say, 250 dpi.

And now Windows (v 8.1 and above) allows to set individual DPI settings on different monitors.

If your desktop is shared among these display you will probably want to move application windows from one desktop to another. But having two surfaces with different DPI settings will require your application to support dynamic DPI changes on the fly.

Sciter engine is getting support of such per window DPI starting v. 3.0.2.0. Here is what you will see sdk/samples/basics/test-system-font-and-dip.htm sample while moving Sciter demo window between monitors with different DPI:

Sciter on Windows 8.1, per monitor DPI

In order your HTML/CSS UI play nicely with this feature you should use logical length units: dip (device independent pixel, 1/96 of inch), pt, mm, in, cm, etc. in your designs. Note that in Sciter 1px is a physical unit – it is always one physical pixel. In some cases (e.g. border widths) you may still want to use dimensions/sizes in physical pixels but that should be an exception indeed. And flex units are always the best choice when you need flexible layout adjustable to dynamic window sizes.

Note in the animation above that document loaded in sciter has three squares: 100px, 100dip and 100dip. Last square has also border defined in dips – when the window is moved to the left monitor (uses 125% scale) these rectangles are getting different sizes. So last two are proportional to the window size.

Next Page »