Lettering text mixin for Jade

fakeBreak.css

.fakeBreak::after {
    white-space: pre;
    content: "\000a";
}

lettering.jade

mixin lettering(element, text, labelId)
    -
        labelId = labelId || (function() {
            var date = new Date();
            var time = date.getTime();
            var ret = Math.floor(Math.random() * time).toString().slice(0, 10);
            return "lettering-label-" + ret;
        })();
    #{element}(aria-labelledby="#{labelId}")&attributes(attributes).lettering
        span.visuallyHidden(id="#{labelId}")= text
        span(aria-hidden="true").lettering-inner
            if typeof text === "string"
                each v, i in text.split("")
                    span.lettering-letter(class="is-letter-#{i + 1}")= v
            else if Array.isArray(text)
                each v, i in text
                    each w, j in v
                        span.lettering-letter(class="is-letter-#{j + 1}")= w
                    if i + 1 < text.length
                        span.fakeBreak

visuallyHidden.css

/* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.visuallyHidden {
    position: absolute;
    margin: -1px;
    padding: 0;
    border: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}