Giter VIP home page Giter VIP logo

normalize-css-z's Introduction

Normalization of a CSS z-index value to a 32-bit floating-point number

crate documentation build status

Note

This project is a work in progress, so please watch for a new release and ensure to use the latest version.

Origin

I struggled to map CSS z-index values to 32-bit floating-point numbers between 0.0 and 1.0 because dividing a large number by another large number, such as 2_147_483_646.0 / 2_147_483_647.0, does not yield precise results.

To illustrate the issue, here are some examples (see playground):

2_147_483_646.0 / 2_147_483_647.0 = 1.0
2_147_483_645.0 / 2_147_483_647.0 = 1.0
2_147_483_644.0 / 2_147_483_647.0 = 1.0
2_147_483_643.0 / 2_147_483_647.0 = 1.0
2_147_483_642.0 / 2_147_483_647.0 = 1.0
2_147_483_641.0 / 2_147_483_647.0 = 1.0
2_147_483_640.0 / 2_147_483_647.0 = 1.0
2_147_483_639.0 / 2_147_483_647.0 = 1.0
2_147_483_638.0 / 2_147_483_647.0 = 1.0
2_147_483_637.0 / 2_147_483_647.0 = 1.0

I spent some time experimenting to figure out a reasonable approach to this challenge, and I may have finally found a way to manage the headache of mapping CSS z-index values.

Usage

Run the following Cargo command in your project directory:

cargo add normalize-css-z

Or add the following line to your Cargo.toml:

[dependencies]
normalize-css-z = "0.7"

And in your Rust file:

use normalize_css_z::normalize;

fn main() {
    let z_ = 2_147_483_647;
    if let Some(z) = normalize(z_) {
        // Do something with `z`.
    } else {
        // Handle unsupported z-index.
    }
}

Custom lower, middle, and upper ranges are now available under the 'custom' feature flag as of version 0.6

NOTE: This version has not been thoroughly tested yet.

To use, add the following line to your Cargo.toml:

[dependencies]
normalize-css-z = { version = "0.7", features = ["custom"] }

And in your Rust file:

use normalize_css_z::{
    normalizer::Normalizer,
    ranges::RangesBuilder,
};

fn main() {
    let builder = RangesBuilder::default()
        .with_lower(0..=100)
        .with_middle(101..=200)
        .with_upper(201..=300);
    let normalizer = Normalizer::new(builder.build());

    if let Some(z) = normalizer.calc(0) {
        // Do something with `z`.
    } else {
        // Handle unsupported z-index.
    }
}

Supported ranges of z-indexes

LOWER MIDDLE UPPER
-2_147_483_647..=-2_139_095_039 -4_194_303..=4_194_304 2_139_095_040..=2_147_483_647

Total number of supported z-indexes (as of 1/16/2024)

8,388,608 * 3 + 1 = 25,165,825

License

Licensed under either of

at your option.

normalize-css-z's People

Contributors

sjinno avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.