[CSS3 Text] request: line-padding

When adding a background to wrapped text, it is not currently possible
to add padding to the wrapped line endings.

For example:
<div style="width:100px">
    <span style="background:blue;line-height:1.5em;padding:0.5em">One
two three four five six seven eight nine ten.</span>
</div>

This will show the following text with a blue background:
One two three
four five six
seven eight
nine ten.

The padding will add extra background-coloured space to the start and
end of the sentence, shown below as "--":
--One two three
four five six
seven eight
nine ten.--

I would like to add such padding to every line.
--One two three--
--four five six--
--seven eight--
--nine ten.--

It would be normal practice to simply add this padding to the
containing div element, but the blue background will not be shown
against each line.
Thus I have no means to achieve this using CSS at present, and I see
no solution in the working drafts for CSS3.
I can currently emulate this solution with javascript, by wrapping
each word with nbsp at runtime and reducing the word-spacing property
to compensate (except in IE6).  This is quite awkward.

I therefore propose the following addition to the CSS3 Text module as
perhaps item 7.4:
Name:  line-padding
Value:  [ <length> | <percentage> | none ]{1,2}
Initial:  0 0
Applies to:  inline elements
Inherited:  no
Percentages:  width of containing block
Media:  visual
Computed value:  the percentage as specified or the absolute length

Two values are accepted, for the left and for the right. If only one
value is provided, it applies for both.
To follow standard CSS patterns, two additional properties are suggested:
Name:  line-padding-left, line-padding-right

The padding forms part of the inline element, where the text is broken
to wrap a line.  This may mean that text is wrapped earlier, as the
padding detracts from the available width.  The padding is intended to
mimic the effect of padding attached to the start and end of the
inline element.

The padding would appear where it currently is not handled by other means.
Adding to my former example:
<div style="width:100px">
    <span style="background:blue;line-height:1.5em;padding:0.5em;line-padding:1em">One
two three four five six seven eight nine ten.</span>
</div>
Yields the following:
--One two three**
**four five six**
**seven eight**
**nine ten.--

Where ** indicates the line-padding of 1em, and -- indicates the
padding of 0.5em.

Please consider this proposal.
(or, even better, tell me of an existing solution :) )

Many thanks
Kenneth

-- 
Kenneth
http://kenneth.kufluk.com
kenneth@kufluk.com
Sent from London, Eng, United Kingdom

Received on Tuesday, 19 January 2010 22:03:42 UTC