Re: [css3-values] [css3-images] no units for default 'image-resolution'

> On Tue, Oct 26, 2010 at 9:50 AM, Shelby Moore <shelby@coolpage.com> wrote:
>> The 'px' is defined to respect relative ocular psychophysics:
>>
>> http://www.w3.org/TR/CSS21/syndata.html#numbers
>> http://www.w3.org/TR/css3-values/#relative0
>>
>> The 'image-resolution' is by default 1 device pixel ('dppx'):
>>
>> http://dev.w3.org/csswg/css3-images/#image-resolution
>> http://www.w3.org/TR/css3-images/#resolution-units
>>
>> But there exists no image pixel unit, i.e. 'px' is not equivalent to an
>> image pixel.
>
> Yes it is: "By default, CSS assumes a resolution of one image pixel
> per CSS ?px? unit; however, the ?image-resolution? property allows
> using some other resolution."
>
> 1dppx means "1 image pixel = 1 CSS px".

My mistake.  For some reason in my haste, I thought dppx meant number of
device pixels, but of course it says "dots per ‘px’ unit".

Juggling too many balls today I guess. Sorry.

> There isn't a unit that lets you, in some other property, reference
> the pixel size of an image, but that hasn't had any decent use-cases
> presented for it.

I can't think of any either, now that you mention it.

>> This presents an irresolvable design error. For example, I want to put
>> "Shift+Enter" in tiny text inside the button for "Send" on my chat
>> application (because I want to support Enter normally in the <textarea>
>> for the text being sent).
>>
>> The following works but the "Shift+Enter" overwhelms the "Send", since I
>> have no way to make a portion of the text within the 'value' attribute
>> smaller:
>>
>> <input type='button' value='Send&#10;Shift+Enter'/>
>>
>> The only way I found to accomplish this without making an image for the
>> entire button (which I don't want to do for accessibility and other
>> relativity breakage reasons), is as follows (and the background-image is
>> a
>> transparent background GIF so the button doesn't lose background
>> capability).
>>
>> <input type='button' style='background:url(Shift+Enter.gif) no-repeat
>> 50%
>> 80%; padding-bottom:10px' value='Send'/>
>>
>> But the problem is that the above assumes that 'px' = '1dppx'.
>>
>> Do you know any solution in current CSS? If not, I hope we can fix this.
>
> Using <input type=button> is only useful in very limited
> circumstances; it's a pretty sucky design in general.  Use <button>
> instead:
>
> <button>Send <small>Shift+Enter</small></button>
>
> Then a bit of CSS to style the <small> sufficiently small and in the
> right position.

I wasn't aware of that HTML4 tag. I will use it. Thank you.

Received on Tuesday, 26 October 2010 19:07:21 UTC