A PROPOSAL FOR REPLACING HTML

SCREEN RESOLUTION INDEPENDENT WEBPAGE MARKUP OR GUI LANGUAGE

Currently, web-page markup languages (HTML etc.) and desktop application GUI's (Graphical User Interface) define size and/or location of graphical elements and objects on the screen using actual pixel coordinates or sometimes using inches etc. The main problem with that is as computer screens gets larger in size and resolution, old web-page and GUI designs do not look as intended in the beginning. So there is a need to constantly re-design web-pages and GUI’s.

Even though scale-free text fonts and graphical image formats already exists, they do not provide a general solution that can be used to  create screen resolution independent web-pages and/or GUI's for desktop or smart-phone applications.

What needed is a general markup language that allows defining location and size of all graphical elements of a web-page or GUI, in a screen resolution independent way.

Here is the solution:

Assume location and size of all graphical elements on a web-page or GUI are defined in a screen resolution (or actual size) independent way. Assume the width (horizontal resolution) of a browser or application window is always 10000 units and define all location and size values of the graphical elements accordingly.

When a web browser or an application needs to display the graphical design, it would need to calculate actual screen pixel locations and pixel-based sizes of the graphical elements using these formulas:

SCRX = X / (10000 – 1) * W + TLX
SCRY = Y / (10000 – 1) * W + TLY

X: X coordinate of the graphical element in markup script.
X: Y coordinate of the graphical element in markup script.
W: Width of the browser or application window in pixels.
TLX: Top-left X pixel coordinate of the browser or application window.
TLY: Top-left Y pixel coordinate of the browser or application window.
SCRX: Actual X pixel coordinate of the graphical element on the screen.
SCRY: Actual Y pixel coordinate of the graphical element on the screen.

X values of the graphical element in the markup script, normally would be between 0 to 9999. (Fractional values like 3600.76 are allowed because some applications, like publishing, can require higher resolution then 10000 units.)
But if there are greater X values then the browser or application window would display a horizontal sliding bar to allow user to see those graphical elements completely.  
Similarly if Y values require actual pixel values outside (below) of the visible window then a vertical sliding bar would be displayed.

Similarly, actual pixel-based sizes of graphical elements on the screen can be calculated using these formulas:
SCRW = SX / 10000 * W
SCRH = SY / 10000 * W

SX: Width of the graphical element in markup script.
SY: Height of the graphical element in markup script.
W: Width of the browser or application window in pixels.
SCRW: Actual width of the graphical element on the screen in pixels.
SCRH: Actual height of the graphical element on the screen in pixels.

(If the graphical element requires an image or video to be displayed then each image or video frame must be re-scaled to fit the actual target size on the screen in real-time.)

Since calculating actual pixel-based values, to display graphical elements on the screen, depends on the current width of the browser or application window, then every-time user changes the width of the window, all graphical elements would need to be re-calculated and re-rendered (in real-time).  

A very simple example script in this markup language could be like:
(The actual syntax can differ in practice.)

Window
RGB Color: 255,255,255

Text
Position: 0,0
Size: 100,12
Text: "Hello World!"
Font: "Courier New", 12
RGB Color: 255,0,0

Image
Position: 0,12
Size: 100,200
ImageFile: "/TestImage.jpg"

Video
Position: 0,500
Size: 200,200
ImageFile: "/Test.mpg"

Notice that each graphical item have a position (top-left x,y) and size (width and height) to appear on the window, and each item can be placed anywhere on the window directly.

The web-page may have many other elements, like tables, buttons, check-boxes, radio buttons, drop-down menus etc. and each element can have many properties that can be set, like color, border etc. Some properties would be obligatory and some could be optional.
To allow existing web browsers to display web-pages created in this kind of markup language, a freely download-able plug-in software would need to be created, for each browser brand.

Also the plug-in software can be designed to accept scripts like in above format or in XML format.

The scripts can be created using any text editor, or visually by using a special GUI design software (Microsoft Visual Basic 6 is a good example of visual GUI design capability).

The format also can be extended to allow embedded scripts in other languages, to manipulate the graphical elements etc.