Re: [CSS3 Text] request: line-padding

Thanks - that's neat.

I'm not entirely sure it's clear what will happen to first-letter
items.  Will each line get it's own first letter?  That wouldn't be
desirable.

Also, in the application I am currently building, we're using
background images as bullets.  So the text should render as:
[img]  One two three--
--four five six--
--seven eight--
--nine ten.--

I think that using the clone technique will repeat that image:
[img]  One two three--
[img]  four five six--
[img]  seven eight--
[img]  nine ten.--

While I'm sure I could "fix" this by wrapping another span around the
element, I would rather not do so, if there's another workaround
available.

Finally, if each line is 'cloned', I think there should be a
CSS-selector for each line.  This would potentially allow for
zebra-style colouring.  Admittedly I don't have a use-case in mind for
this, but it's an idea.

K


2010/1/20 fantasai <fantasai.lists@inkedblade.net>:
> On 01/19/2010 06:37 AM, Kenneth Kufluk wrote:
>>
>> 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.
>
> We had a proposal for this in the older CSS3 Backgrounds and Borders
> drafts. If you don't have a border on the inline, and don't need to
> preserve the default background image tiling behavior, though, the
> current draft defines
>  span { box-decoration-break: clone; }
> which will put padding at all the breaks.
>
> http://www.w3.org/TR/css3-background/#the-box-decoration-break
>
> ~fantasai
>
>



-- 
Kenneth
http://kenneth.kufluk.com
kenneth@kufluk.com

Received on Wednesday, 20 January 2010 11:56:52 UTC