PUBLOG » javascript

Vylepšená náhrada textu obrázkem: acIR

Jakub — Fri, 08 May 2009 21:56:07 +0000

Nemám rád sIFR, proto když mi můj oblíbený (dis)grafik nakreslil nový design pro mojí homepage s použitím moc hezkého, ale nestandradního, fontu, rozhodl jsem se najít jiné řešení pro jeho použití při zachování přístupnosti. Přístupností mám na mysli to, aby byl text v kódu skutečně jako text, byl vidět i při vypnutých obrázcích a šel označit pomocí myši.

Řešení vychází z použití Pixyho náhrady textu obrázkem, které řeší požadavek na text v kódu a funkčnost při vypnutých obrázcích. Zbývalo tedy dořešit problém s označením pomocí myši. Toho jsem dosáhl kouskem JavaScriptu, který při pokusu o označení textu, jenž je ve skutečnosti obrázkem na pozadím elementu opravdový text překrývající, tento překrývající element skryje a po zrušení označení ho opět zobrazí. Malá ukázka (screencast):

Lorem ipsum dolor sit amet,
consectetur adipiscing elit

Accesible Image Replacement neboli acIR, jak jsem toto řešení honosně nazval, vypadá takto:

var acIR = {
 
    FF: /Firefox/i.test(window.navigator.userAgent),
 
    init: function() {
        var element, elements = document.getElementsByTagName('span');
        for (var i = 0; i &lt; elements.length; i++) {
            element = elements[i];
            if (element.parentNode.tagName != 'A') {
                    acIR.enableSelection(element);
            }
        }
    },
 
    enableSelection: function(element) {
 
        acIR.FF &amp;&amp; element.parentNode.insertBefore(element, element.parentNode.firstChild)
 
        window.opera || (element.style.cursor = 'text');
        element.onmousedown = function(e) {
 
            // clean-up
            document.body.onmousedown &amp;&amp; document.body.onmousedown();
            document.body.onmouseup &amp;&amp; document.body.onmouseup();
 
            // Left button is down, enable selection by hiding the picture
            var e = e || window.event;
            if (e.button === 0 || e.button === 1) {
                acIR.start(element);
                document.body.onmouseup = function() {
                    // ..released immediately without moving, cancel the process
                    acIR.end(element);
                    document.body.onmousemove = null;
                }
                document.body.onmousemove = function() {
                    // ...cursor moved, init the re-appear process
                    document.body.onmouseup = null;
                    document.body.onmousemove = null;
 
                    // Down-move-up means 'click' to some browsers, work it around
                    document.body.onmousedown = function () {
                        // The button is down again, we're going to show the pic again soon
                        document.body.onmousemove = function(e) {
                            document.body.onmouseup = null;
                        }
                        document.body.onmouseup = function(e) {
                            // ...clicked, let's show it
                            var e = e || window.event;
                            if (e.button === 0 || e.button === 1) {
                                acIR.end(element);
                                document.body.onclick = null;
                                document.body.onmousedown = null;
                            }
                        }
                    }
                }
            }
        }
    },
 
    start: function(element) {
        if (acIR.FF) {
            element.style.display = 'none';
        } else {
            element.style.visibility = 'hidden';
        }
    },
 
    end: function(element) {
        if (acIR.FF) {
            element.style.display = 'block';
        } else {
            element.style.visibility = 'visible';
        }
    }
 
}

Určitě by stálo za to kód přetvořit do podoby používající nějaký framework nebo alespoň DOM3 events, aby ho bylo možné použít i na stránkách již obsahujující JavaScript, se kterým by acIR v tuto chvíli kvůli způsobu zavěšování posluchačů událostí mohl kolidovat.

acIR bez problému funguje v Opeře, Google Chrome, Konqueroru, IE6, IE7. Ve Firefoxu funguje též, ale je tam menší nedostatek v tom, že po skrytí překrývajícího elementu není text pod ním ihned vybrán – je potřeba pokus o výběr zopakovat výběr začíná od začátku textu nikoliv přesně od místa, kde bylo kliknuto.

V akci lze acIR vidět také na WebKitchen.cz.

Licence pro acIR:

Aktualizace: tento článek je již staršího data, v současné době samozřejmě @font-face rule them all

Implementation of CSS3 selectors in JavaScript

Jakub — Sat, 10 Jan 2009 13:39:46 +0000

A couple of years ago, there was a need for an implementation of CSS3 selectors in JavaScript (as a part of a debugging tool I was working on). The implementation is ready and tested, but is not needed anymore so I’ve decided to publish it for free download.

The implementation is almost 100% complete. It can even handle such things as unicode notations. For example, the following selector is processed exactly as per the spec:

:not(:root):not(form):first-child:not(:lang(en)) >; div:first-child ~ div

The library uses standard DOM methods only, which means that there isn’t any pre-conversion of CSS selectors to an XPath expressions as other such libraries usualy do. The script hasn’t been much optimized in terms of speed and doesn’t work in IE. The main and only goal was to create an implementation that would follow the specification as much as possible and work in the Gecko family browsers.

https://github.com/jkbr/Selectors/

You can try the library directly from your browser (unless you are using IE) on a demo page.

An application to the official W3C’s CSS3 selectors test suit is also available. Note that when performing those tests all !important statements are being ignored.

Implementace CSS3 selectorů v JavaScriptu

Jakub — Fri, 09 Jan 2009 20:36:25 +0000

Pro účely jedné, velice speciální a nakonec nikdy nedokončené, zakázky, bylo potřeba vytvořit implementaci CSS3 selectorů v JavaScriptu. Implementace je hotová, funkční a otestovaná, ale již není potřeba, tak se o ní podělím alespoň tady na blogu.

Jedná se o (v rámci možností) kompletní implementaci, která si poradí i s takovými záludnostmi, jako je zápis pomocí unicode. Např. takovýto selector není problém:

:not(:root):not(form):first-child:not(:lang(en)) >; div:first-child ~ div

Při hledání elementů se využívají pouze standardní DOM metody (tudíž žádná konverze na XPath, jak je bežné pro podobné knihovny psané pro prostředí Internetu). Script nebyl příliš optimalizováno z hlediska rychlosti a ani IE nebyl brán v potaz, neb to nebylo v zadání. Důraz byl kladen především na věrnou implenetaci všech selectorů dle specifikace od W3C.

https://github.com/jkbr/Selectors

Vyzkoušet možnosti knihovny je možné přímo z prohlížeče na speciální testovací stránce.

K dispozici je také aplikace na oficiální sadu testů z dílny W3C. Při zkoušení těchto testů je potřeba mít na paměti, že při aplikování vlastností není brána v potaz priorita, takže i v případě, že např. barva nesedí, nemusí to nutně znamenat, že jde o chybu scriptu (a vice versa).