Evolution of Screen Geometry

A new standard for the era of
screen fragmentation.

The modern digital world is facing an unprecedented challenge. Developers and designers seek a daily balance between microscopic smartphones and massive 8K monitors.

DEKUVE Dynamic Pixel (DPX) is an intelligent unit of measurement that transforms the approach to creating responsive interfaces, making them hardware-independent, predictable, and crystal clear.

What is the Vulnerability of Current Standards?

Existing layout tools, created at the dawn of the internet, have turned into compromising 'crutches'. They either overload hardware resources or break the interface with the slightest change in system settings.

Absolute Blindness (px)

The classic pixel ignores DPI. A 40px element, perfect on an old monitor, turns into an unreadable microscopic dot on an UltraHD display.

Font Dependency (rem/em)

If a user increases the system font for readability, the entire interface geometry (margins, border radii, cards) 'floats'. A typography tool is mistakenly managing the UI framework.

The Blur of Fractional Scaling

OS scaling (125%, 150%) causes downsampling. The result is increased GPU load, accelerated battery drain, and hopelessly 'blurred' fonts and interface lines.

Philosophy and Advantages of DPX

DPX introduces the concept of 'smart base grids'. The algorithm mathematically calculates the ideal physical size of each element before the final rendering stage.

Pixel-Perfect Without Compromises

Calculations occur on the fly and are rounded to hundredths. The interface is rendered crisply, without blur, and without resource-intensive hardware compression by the operating system.

'Hardware Pulse' (Adaptability)

An independent monitoring mechanism instantly reacts to changes in screen parameters (hot-plugging a monitor, changing system scale). The interface rebuilds seamlessly.

Pure Logic Separation

DPX permanently separates interface geometry and typography. Change font sizes however you like — grids, panels, and icons will retain their perfect proportions.

Live Geometry Comparison

Change the system scaling or monitor resolution. You will see how DPX mathematically compensates for changes, while old standards behave unpredictably.

Geometry on DPX

Stable Everywhere

Geometry on PX

Deforms
(Ignores user settings)

Geometry on REM

Depends on Font
(Loses flexibility)

Geometry on VW

Liquid Extremes
(Crushes & stretches)

Syntax Simplicity

No build steps, no complex CSS variables. Just write dpx directly in your inline styles, and the engine handles the rest.

index.html

<!-- DPX Standard (Dynamic & Adaptive) -->
<div style="width: 250dpx; height: 250dpx; border-radius: 40dpx;">
    <h3 style="font-size: 24dpx;">Perfect Scale</h3>
</div>

<!-- Legacy PX (Static & Blind) -->
<div style="width: 250px; height: 250px; border-radius: 40px;">
    <h3 style="font-size: 24px;">Deforms on scaling</h3>
</div>

Under the Hood

dpx-v6.js (Vanilla JavaScript)

/**
 * DEKUVE Dynamic Pixel (DPX) - Classic DOM Controller
 * @author Denys Kulbii
 * @license Apache-2.0
 */

// Base values (Now representing the single MAIN AXIS size)
const desktopBaseSize = 1920; 
const ultrawideBaseSize = 2560; // 21:9 formats
const superUltrawideBaseSize = 3840; // 32:9 formats

const tabletBaseSize = 768;
const mobileBaseSize = 380;

// Function to determine form factor and base grid
function getDeviceBaseSize() {
    const ua = navigator.userAgent || navigator.vendor || window.opera;
    const logicalWidth = window.screen.width;
    const logicalHeight = window.screen.height;
    const physicalWidth = logicalWidth * window.devicePixelRatio;
    
    let type = 'desktop';

    if (navigator.userAgentData?.mobile) {
        type = 'mobile';
    } else if (/Mobi|Android|iPhone|iPod/i.test(ua)) {
        type = 'mobile';
    }

    const isAndroid = /Android/i.test(ua);
    const isTablet = /iPad/i.test(ua) || 
                     (isAndroid && !/Mobile/i.test(ua)) || 
                     (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

    if (isTablet) type = 'tablet';

    if (type === 'tablet') {
        return { size: tabletBaseSize, isMobileFormFactor: true };
    } else if (type === 'mobile') {
        const minDimension = Math.min(logicalWidth, logicalHeight);
        return minDimension <= 600 
            ? { size: mobileBaseSize, isMobileFormFactor: true } 
            : { size: tabletBaseSize, isMobileFormFactor: true };
    } else {
        if (physicalWidth <= 1024) { 
            return { size: tabletBaseSize, isMobileFormFactor: true };
        } else {
            const maxDimension = Math.max(logicalWidth, logicalHeight);
            const minDimension = Math.min(logicalWidth, logicalHeight);
            const aspectRatio = maxDimension / minDimension;

            if (aspectRatio >= 3.0) return { size: superUltrawideBaseSize, isMobileFormFactor: false };
            if (aspectRatio >= 2.0) return { size: ultrawideBaseSize, isMobileFormFactor: false };
            return { size: desktopBaseSize, isMobileFormFactor: false };
        }
    }
}

// Function to calculate the scaling factor
function calculateScaleFactor() {
    const { size: baseSize, isMobileFormFactor } = getDeviceBaseSize();
    const logicalWidth = window.screen.width;
    const logicalHeight = window.screen.height;

    let scaleFactor;
    
    // BRILLIANT FIX:
    // For mobile devices, the main axis is the short side of the screen
    // For desktops, the main axis is the long side of the screen
    if (isMobileFormFactor) {
        const minDimension = Math.min(logicalWidth, logicalHeight);
        scaleFactor = minDimension / baseSize;
    } else {
        const maxDimension = Math.max(logicalWidth, logicalHeight);
        scaleFactor = maxDimension / baseSize;
    }

    return Math.round(scaleFactor * 100) / 100;
}

function convertDPXtoPX(value) {
    const scaleFactor = calculateScaleFactor();
    const dpxValue = parseFloat(value);
    const finalValue = dpxValue * scaleFactor;
    return Math.round(finalValue * 100) / 100;
}

let currentScale = null;

function applyDPXScaling() {
    const scaleFactor = calculateScaleFactor();
    
    // Optimization: prevent unnecessary DOM tree rebuilds if the scale hasn't changed
    if (scaleFactor === currentScale) return;
    currentScale = scaleFactor;

    const elements = document.querySelectorAll('[style*="dpx"], [data-original-style]');

    elements.forEach(element => {
        let style = element.getAttribute('data-original-style');
        
        if (!style) {
            style = element.getAttribute('style');
            element.setAttribute('data-original-style', style);
        }

        const updatedStyle = style.replace(/(\d+(?:\.\d+)?)\s*dpx/g, (match, value) => {
            const pxValue = convertDPXtoPX(value);
            return `${pxValue}px`;
        });

        element.setAttribute('style', updatedStyle);
    });

    console.log("DPX scaling applied. Factor:", scaleFactor);
}

// ==========================================
// LAYER 1: Deep hardware tracking (For OS zoom and screen rotations)
// ==========================================
let lastScreenWidth = window.screen.width;
let lastScreenHeight = window.screen.height;

let dprQuery;
let dprWebkitQuery;
let widthQuery;

function watchHardwareMatrix() {
    // Clear old listeners
    if (dprQuery) dprQuery.removeEventListener('change', onHardwareChange);
    if (dprWebkitQuery) dprWebkitQuery.removeEventListener('change', onHardwareChange);
    if (widthQuery) widthQuery.removeEventListener('change', onHardwareChange);

    // Subscribe to current system display parameters
    dprQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
    dprWebkitQuery = window.matchMedia(`(-webkit-device-pixel-ratio: ${window.devicePixelRatio})`);
    widthQuery = window.matchMedia(`(device-width: ${window.screen.width}px)`);

    dprQuery.addEventListener('change', onHardwareChange);
    dprWebkitQuery.addEventListener('change', onHardwareChange);
    widthQuery.addEventListener('change', onHardwareChange);
}

function onHardwareChange() {
    lastScreenWidth = window.screen.width;
    lastScreenHeight = window.screen.height;
    applyDPXScaling();
    // Recreate trackers for the new matrix
    watchHardwareMatrix(); 
}

// ==========================================
// LAYER 2: Smart interaction hooks (Fix for "sleeping" floating windows)
// ==========================================
function checkScreenMatrix() {
    // Silently check if the browser missed a resolution change
    if (window.screen.width !== lastScreenWidth || window.screen.height !== lastScreenHeight) {
        onHardwareChange();
    }
}

// Wake up when the window resizes, gets clicked, or hovered over
window.addEventListener('resize', checkScreenMatrix);
window.addEventListener('focus', checkScreenMatrix);
document.addEventListener('mouseenter', checkScreenMatrix);

// Engine start
watchHardwareMatrix();

window.addEventListener('DOMContentLoaded', () => {
    applyDPXScaling();
});

Universal Core: From Web to Native

The dpx.js architecture was originally designed as a cross-platform ecosystem standard. The logic is abstracted from the execution environment.

Web Dominance

Integrates perfectly into modern web resources and PWAs, eliminating the need to write hundreds of lines of media queries.

Portability

The abstract algorithm is easily ported from JavaScript to compiled languages such as Rust, C, C++, Python, Zig, Vala, and many others.

Native Frameworks

Paves the way for creating logic for GTK, Qt, and Flutter, ensuring an identical look on Linux, Windows, and macOS.

Get PostCSS-DPX Plugin

A New Open Standard for Digital Geometry

By shifting scaling logic to the level of pure mathematical preprocessing, DPX solves the chronic problems of screen fragmentation and provides developers with a universal, lightweight, and reliable tool.

Standard Roadmap

DPX Evolution Roadmap

From a mathematical concept and a lightweight JS prototype to a globally accepted, high-performance native web standard.

COMPLETED

Phase 1: Proof of Concept

Validated the mathematical model and the "smart base grids" logic within a live web environment.

Lightweight dpx.js legacy library released
Active DOM parsing (Regex) verified
Hardware matrix detection engine stabilized

CURRENT / ACTIVE

Phase 2: Post-Processing Compiler

Successfully shifted calculations from runtime to compile-time. The official plugin is now available.

Published PostCSS Plugin on NPM
Achieved Zero Runtime Cost (0% CPU DOM parsing)
Upcoming: Precompiling native GTK3 / GTK4 styles
Upcoming: Integration for Windows & macOS Hybrid Apps (Electron/Tauri)

THE GOAL / STANDARD

Phase 3: W3C Specification

Defining the formal spec and achieving native browser engine implementation.

Bikeshed Specification Draft for W3C CSS WG
Native Blink, Gecko, WebKit support
Cross-Platform UI SDKs: Porting mathematical logic to native toolkits (Qt, Flutter, Avalonia)

A new standard for the era of screen fragmentation.