Re: [CSS3 Text] request: line-padding

> On 01/20/2010 05:56 AM, Tab Atkins Jr. wrote:
>> On Wed, Jan 20, 2010 at 5:56 AM, Kenneth Kufluk<kenneth@kufluk.com>  wrote:
>>> Also, in the application I am currently building, we're using
>>> background images as bullets.
>>> 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.--
>>
>> Yes, it will.
>>
>>> 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.
>>
>> Alternately, switch the box to display:line-item and supply the image
>> as a real bullet via list-style-type.

And by line-item, you mean list-item, I presume. =)
list-items are blocks, and it seems he wants an inline here. Since we
don't have display: inline-list-item yet, the best thing to do for the
bullet would be to use the :before pseudo-element.

On 01/20/2010 08:57 AM, Brad Kemper wrote:
>
> It sounds to me like you are describing a background pattern.
> Create an image 1px wide, and as tall as two lines of text. Make the
> top half of the image one color and the bottom half a different color,
> and repeat it across the whole multi-line block. Use 'background-size'
> to keep it the height of 2 lines of text (3em in your example), maybe
> starting with a larger-than-needed image so that it scales well.

That's a really hackish way of doing it, and it'll break if there's any
content on any lines that's taller than the default line height.

~fantasai

Received on Wednesday, 20 January 2010 17:49:56 UTC