About关于ÜberAcercaNoinOver

Outlines

This site uses SCSS to make writing styles more re-usable and modular.

// The CSS variable '--color-fg' contains the hue and saturation together
$color-fg: hsl(var(--color-fg), var(--l-fg));

// Subtitle-style outline of text. Not suitable for large amounts of text due to rendering 8 shadows
@mixin text-outline($color: $color-fg, $width: "var(--border-thickness)") {
    text-shadow:
        #{"0 calc(-1 * "} + $width + #{") 0 "} + $color,
        #{"calc(0.707106781186 * "} + $width + #{") calc(-0.707106781186 * "} + $width + #{") 0 "} + $color,
        #{$width} + #{" 0 0 "} + $color,
        #{"calc(0.707106781186 * "} + $width + #{") calc(0.707106781186 * "} + $width + #{") 0 "} + $color,
        #{"0 "} + $width + #{" 0 "} + $color,
        #{"calc(-0.707106781186 * "} + $width + #{") calc(0.707106781186 * "} + $width + #{") 0 "} + $color,
        #{"calc(-1 * "} + $width + #{") 0 0 "} + $color,
        #{"calc(-0.707106781186 * "} + $width + #{") calc(-0.707106781186 * "} + $width + #{") 0 "} + $color;
}

The text-outline mixin shown above takes a color and a line width. The text shadow property consists of eight separate shadows, which is imho the optimum for a high-quality result. The four diagonal ones can be removed to make rendering of large amounts of text faster, but I never found that to give good results, so I didn’t code any configurability for it.

Lines sized to device pixels

In CSS, if you specify a line to be 5px, what you actually get is a line of 5 CSS pixels, which is what you want most of times. But in some cases you want to draw ‘device’ pixels, for example to create ‘hairlines’ (the thinnest possible line that can be displayed properly).

We will be using and updating a CSS variable called --device-pixel-ratio, which indeed is window.devicePixelRatio exported to CSS. First we make sure it always exists by adding a default in our stylesheet:

:root {
    --device-pixel-ratio: 2;
}

Next we need a bit of script and some event listeners to update the CSS variable on any resize or zoom effect. Note that this does not capture ‘pinch zoom’, there is afaik no good method to listen for that. But for most cases it does the job.

const r = document.querySelector(':root');
const set_device_pixel_ratio_var = () => {
    r.style.setProperty('--device-pixel-ratio', window.devicePixelRatio || 1);
}

window.ready(()=>{
    window.matchMedia('screen and (min-resolution: 2dppx)')
        .addEventListener("change", ()=>{
            set_device_pixel_ratio_var()
        });
    window.addEventListener("resize", () => {
        set_device_pixel_ratio_var()
    });
    set_device_pixel_ratio_var();
});

Now we can create a hairline by using calc to make sure it’s recalculated when necessary.

:root {
    --thickness-hairline: calc( 1px / var(--device-pixel-ratio) );
}

And last, but not least, we can apply the whole to the h1 tags in our fairy-tales.

.fairytale {
    h1 {        
        @include text-outline("purple", "var(--thickness-hairline)");
    }
}