Jump to content
Sign in to follow this  
lynkfs

percentage based positioning

Recommended Posts

Percentage based positioning has the advantage of having a 'responsive' page layout with little effort.

Responsive in this respect means that page layouts will scale seamlessly on devices which may have slightly different pixel dimensions horizontally and/or vertically.

So instead of having an editbox on absolute positioning 100,100,400,35 in pixel terms, it is sometimes easier to define all or some of these in percentages. Conveniently 10%-left is interpreted by the browser as starting on 10% of the viewport width, 10%-top starts at 10% of the viewport height etc.

Mixing pixels and percentages works fine too

MyEditBox.handle.style.left := '10%';
MyEditBox.handle.style.top := '12px';  //MyEditBox.left := 12;

This is all still based on absolute positioning, which is the default in Smart.

An alternative approach, with the same outcome, is to define dimensions at runtime based on a formula.

MyEditBox.handle.style.left := 'calc(10vw - 20px)' 

resolves in a left positioning of 10% of the viewport-width minus 20 pixels : 28 pixels on a 480 pixels wide phone

Note that the minus sign needs to be enclosed in spaces or this won't work

This can be also used to scale f.i. font size depending on device capabilities :

MyEditBox.handle.style['font-size'] := 'calc(16px + 1vw)' 

which has the effect of a font size which grows by 1 pixel for every 100 pixels of viewport width. 

It can get a bit funny on orientation change

 

an all-percentage example page with some random text and images, based on these principles, looks like this , which scales nicely from mobile to desktop (resize browser window).

Share this post


Link to post
Share on other sites

It becomes even more interesting when combining css variables and calc :

since .... it has been possible to define css variables, which can be referenced in multiple ways

they can even be set/get in pascal/js :
 

get a handle to a stylesheet, or create one on the fly

      //stylesheet
      var style := browserapi.document.createElement("STYLE");
      browserapi.document.head.appendChild(style);
      var styleSheet := style.sheet;

set a css variable ("--variable-width") and insert into the stylesheet
css variable names can be any string but have to start with --

      //set initial css variable (width)
      var s1 := #'
      :root {
        --variable-width: 500px;
      }';
      styleSheet.insertRule(s1, 0);


retrieve and display css width variable

          browserapi.window.alert(
            browserapi.window.getComputedStyle(browserapi.document.documentElement)
            .getPropertyValue('--variable-width'));

set css variable to some value

          browserapi.document.documentElement.style['--variable-width'] :=
            Memo1.handle.getBoundingClientRect().width;

use this variable in a 'calc'ulation

          Memo1.handle.style['height'] := 'calc(var(--variable-width) * 0.6)';
          

 

having a 'width' variable is just an example, maybe a bit contrived. Works fine though.
Usually css variables are used for colors etc,  and those values which need to be set globally for the whole application.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...