-moz-background-inline-policy on webkit

Question

Does something like -moz-background-inline-policy exist in Webkit? This property basically gives you the opportunity to specify how should background render for each line of an inline element. I attach to images of the same element on different browsers.

This is the result on firefox (with -moz-background-inline-policy: each-box;)

This is on Google Chrome (I've tried -webkit-background-inline-policy, but it seems it doesn't exist)

UPDATE

Since there is no background policy property on Webkit, I'm trying to find a different solution using jQuery. I'm adding an extra span behind each line of text. It's ok, except for the fact that text is not measured properly. You can see both examples in action here:

1. Original solution (background inline policy): http://jsfiddle.net/notme/mCnGy/5/
2. New solution (jQuery spans): http://jsfiddle.net/notme/my3br/1/

SOLUTION

//thanks @Peter Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
    var dummy = this.clone().css({
        top: -9999,
        left: -9999,
        position: 'absolute',
        width: this.width()
    }).appendTo(this.parent()),
        text = dummy.text().match(/\S+\s+/g);

    var words = text.length,
        lastTopOffset = 0,
        lines = [],
        lineText = '';

    for (var i = 0; i < words; ++i) {
        dummy.html(
        text.slice(0, i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i + 1).join(''));

        var topOffset = jQuery('span', dummy).offset().top;

        if (topOffset !== lastTopOffset && i != 0) {
            lines.push(lineText);
            lineText = text[i];
        } else {
            lineText += text[i];
        }

        lastTopOffset = topOffset;
    }
    lines.push(lineText);

    this.html(openTag + lines.join(closeTag + openTag) + closeTag);
    dummy.remove();
};

//thanks @thirtydot
var fixIt = function() {
    //remove previous .dummy
    $('.dummy').remove();

    $('div.node-title-text').each(function(index) {

        var dummy = $(this).clone().removeClass().addClass('dummy').appendTo($(this).parent());
        console.log(dummy);
        $(dummy).wrapLines('<span><span>', '</span></span>');

        var padding = 15;

        dummy.css({
            left: -padding,
            right: -padding
        }).find(' > span').css('padding-left', padding*2);

    });
};

$(window).load(function(){
    $(window).resize(fixIt).resize(); //trigger resize event onLoad
});

Answer 1

This works, but it could probably be made more efficient:

http://jsfiddle.net/thirtydot/UGBXD/3/

Here's the complete code for posterity:

JS:

//thanks @Peter Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
    var dummy = this.clone().css({
        top: -9999,
        left: -9999,
        position: 'absolute',
        width: this.width()
    }).appendTo(this.parent()),
        text = dummy.text().match(/\S+\s+/g);

    var words = text.length,
        lastTopOffset = 0,
        lines = [],
        lineText = '';

    for (var i = 0; i < words; ++i) {
        dummy.html(
        text.slice(0, i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i + 1).join(''));

        var topOffset = jQuery('span', dummy).offset().top;

        if (topOffset !== lastTopOffset && i != 0) {
            lines.push(lineText);
            lineText = text[i];
        } else {
            lineText += text[i];
        }

        lastTopOffset = topOffset;
    }
    lines.push(lineText);

    this.html(openTag + lines.join(closeTag + openTag) + closeTag);
    dummy.remove();
};

var fixIt = function() {
    $('.dummy').remove();

    $('div.node-title-text').each(function(index) {
        //remove previous .dummy
        var dummy = $(this).clone().removeClass().addClass('dummy').appendTo($(this).parent());
        $(dummy).wrapLines('<span><span>', '</span></span>');
    });
};
$(window).resize(fixIt).resize(); //trigger resize event onLoad

CSS:

.node-title {
    position: relative;
    margin-bottom: 16px
}
.node-title-text {
    position: relative;
    z-index: 2
}
.dummy {
    position: absolute;
    top: 0; left: 0;
    z-index: 1
}
.dummy > span {
    background: url('https://i.stack.imgur.com/HPofR.png') top left no-repeat,
        url('https://i.stack.imgur.com/C8ImH.png') top right no-repeat,
        url('https://i.stack.imgur.com/9is9r.png') top center repeat-x;
}
.dummy > span > span {
    visibility: hidden
}

HTML: (same as yours)

<div class="node-title">
    <div class="node-title-text">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed suscipit fermentum leo eu scelerisque.</a>
    </div>
</div>

Answer 2

This non-standard feature isn't implemented in other browsers. You'll need to wrap each line in a span, then apply the background to that span.

You could use javascript to sort out the spans for you if you needed to have dynamic text, but if it's possible to hardcode it then it shouldn't be too complex.