Re: [css-shapes] how to position <basic-shape>s

On Wed, Oct 9, 2013 at 2:52 PM, Lev Solntsev <greli@mail.ru> wrote:
> Tab Atkins Jr. <jackalmage@gmail.com> писал(а) в своём письме Thu, 10 Oct
> 2013 01:38:27 +0400:
>> On Wed, Oct 9, 2013 at 2:22 PM, Lev Solntsev <greli@mail.ru> wrote:
>>>
>>> While compatibility is good thing to concern, background-position syntax
>>> gives more possibilities. An element can be positioned from the bottom
>>> right corner. Also it's good for i18n—positioning from the right edge
>>> is an usual case in RTL-manner styling.
>>
>>
>> You can do that without the <position> syntax - just use calc().  20px
>> from the right edge is "calc(100% - 20px)".  The <position> syntax
>> makes this more convenient/readable, but the only difference in
>> ability is the functionality of percentages.
>
>
> Haven't used calc() yet. From which edge of a shape does it refer? From
> the top left corner or bottom right? I bet the former, while
> background-position using the latter, IIRC, and that's what an author
> may want.

calc() is just a way to do math on CSS types.  In this context, it
returns a length, which is interpreted exactly as any other length.

In this case, yes, it'll be positioning the top/left corner as usual.
Given that the rectangle() syntax requires you to specify a width,
though, you can do it anyway.  Say you have a 100px-wide rectangle,
which you want to be 3em away from the right edge of the container.
Just use "calc(100% - 100px - 3em)" as the x-coordinate.

Like I said, harder to read, but exactly as powerful, at least in
cases like this where you're required to know the width already.

~TJ

Received on Wednesday, 9 October 2013 22:00:11 UTC