'float: before' and 'float: after' for easier styling of RTL languages

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

'float: before' and 'float: after' for easier styling of RTL languages

Mats Blakstad
Hi

Is it possible to simplify floating of RTL languages?

RTL languages changes the meaning of "left" and "right". Extra stylesheets are needed for RTL languages to make floating correct, it takes time to sit and revert all floating.

It would be easier if we could make elements float "before" or "after", and then make it always float in correct directions depending on the dir attribute (dir="rtl" or dir="ltr").

Reply | Threaded
Open this post in threaded view
|

Re: 'float: before' and 'float: after' for easier styling of RTL languages

Praveen Puglia
Would it be better to have a property like 'float-direction' in css and have values like "rtl" / "ltr" OR "to right"/"to left" ?

On Tue, Nov 24, 2015 at 5:51 AM, Mats Blakstad <[hidden email]> wrote:
Hi

Is it possible to simplify floating of RTL languages?

RTL languages changes the meaning of "left" and "right". Extra stylesheets are needed for RTL languages to make floating correct, it takes time to sit and revert all floating.

It would be easier if we could make elements float "before" or "after", and then make it always float in correct directions depending on the dir attribute (dir="rtl" or dir="ltr").


Reply | Threaded
Open this post in threaded view
|

Re: 'float: before' and 'float: after' for easier styling of RTL languages

Mats Blakstad
Yes, but even if you have a RTL language it doesn't mean that you want everything on the page to float right. You just want to to float opposite of the LTR language.

Let me give one example: A theme have 2 sidebars: One sidebar with menu ("First sidebar") and a second sidebar with advertisements ("Second sidebar").

In LTR languages you want "first sidebar" to go to left, and second sidebar to go to right.

In RTL languages you want "fist sidebar" to go to right, and second sidebar to go to left (opposite).

You want one of them to float "first" and the second to float "last". Not to make everything in same direction, but everything in opposite directions.

2015-11-24 6:23 GMT+01:00 Praveen Puglia <[hidden email]>:
Would it be better to have a property like 'float-direction' in css and have values like "rtl" / "ltr" OR "to right"/"to left" ?


On Tue, Nov 24, 2015 at 5:51 AM, Mats Blakstad <[hidden email]> wrote:
Hi

Is it possible to simplify floating of RTL languages?

RTL languages changes the meaning of "left" and "right". Extra stylesheets are needed for RTL languages to make floating correct, it takes time to sit and revert all floating.

It would be easier if we could make elements float "before" or "after", and then make it always float in correct directions depending on the dir attribute (dir="rtl" or dir="ltr").



Reply | Threaded
Open this post in threaded view
|

Re: 'float: before' and 'float: after' for easier styling of RTL languages

Praveen Puglia
I am wondering if flexbox is a ready solution to that and changing the flex-direction property to appropriate value would do the job. Won't flex-direction:row-reverse suffice? 

On Tue, Nov 24, 2015 at 12:27 PM, Mats Blakstad <[hidden email]> wrote:
Yes, but even if you have a RTL language it doesn't mean that you want everything on the page to float right. You just want to to float opposite of the LTR language.

Let me give one example: A theme have 2 sidebars: One sidebar with menu ("First sidebar") and a second sidebar with advertisements ("Second sidebar").

In LTR languages you want "first sidebar" to go to left, and second sidebar to go to right.

In RTL languages you want "fist sidebar" to go to right, and second sidebar to go to left (opposite)..

You want one of them to float "first" and the second to float "last". Not to make everything in same direction, but everything in opposite directions.

2015-11-24 6:23 GMT+01:00 Praveen Puglia <[hidden email]>:
Would it be better to have a property like 'float-direction' in css and have values like "rtl" / "ltr" OR "to right"/"to left" ?


On Tue, Nov 24, 2015 at 5:51 AM, Mats Blakstad <[hidden email]> wrote:
Hi

Is it possible to simplify floating of RTL languages?

RTL languages changes the meaning of "left" and "right". Extra stylesheets are needed for RTL languages to make floating correct, it takes time to sit and revert all floating.

It would be easier if we could make elements float "before" or "after", and then make it always float in correct directions depending on the dir attribute (dir="rtl" or dir="ltr").






--
__________________________
Thanks and Regards,
Praveen Puglia


"Code is Poetry"
Reply | Threaded
Open this post in threaded view
|

Re: 'float: before' and 'float: after' for easier styling of RTL languages

Sebastian Zartner-3
In reply to this post by Mats Blakstad
On 24 November 2015 at 07:57, Mats Blakstad <[hidden email]> wrote:

> Yes, but even if you have a RTL language it doesn't mean that you want
> everything on the page to float right. You just want to to float opposite of
> the LTR language.
>
> Let me give one example: A theme have 2 sidebars: One sidebar with menu
> ("First sidebar") and a second sidebar with advertisements ("Second
> sidebar").
>
> In LTR languages you want "first sidebar" to go to left, and second sidebar
> to go to right.
>
> In RTL languages you want "fist sidebar" to go to right, and second sidebar
> to go to left (opposite).
>
> You want one of them to float "first" and the second to float "last". Not to
> make everything in same direction, but everything in opposite directions.

Looks like what you're looking for is defined here:

https://drafts.csswg.org/css-logical-props/#float-clear

Sebastian

Reply | Threaded
Open this post in threaded view
|

Re: 'float: before' and 'float: after' for easier styling of RTL languages

Praveen Puglia
I agree. The logical properties are probably what you are looking for. 

This should come in handy as well :

On Tue, Nov 24, 2015 at 2:32 PM, Sebastian Zartner <[hidden email]> wrote:
On 24 November 2015 at 07:57, Mats Blakstad <[hidden email]> wrote:
> Yes, but even if you have a RTL language it doesn't mean that you want
> everything on the page to float right. You just want to to float opposite of
> the LTR language.
>
> Let me give one example: A theme have 2 sidebars: One sidebar with menu
> ("First sidebar") and a second sidebar with advertisements ("Second
> sidebar").
>
> In LTR languages you want "first sidebar" to go to left, and second sidebar
> to go to right.
>
> In RTL languages you want "fist sidebar" to go to right, and second sidebar
> to go to left (opposite).
>
> You want one of them to float "first" and the second to float "last". Not to
> make everything in same direction, but everything in opposite directions.

Looks like what you're looking for is defined here:

https://drafts.csswg.org/css-logical-props/#float-clear

Sebastian



--
__________________________
Thanks and Regards,
Praveen Puglia


"Code is Poetry"
Reply | Threaded
Open this post in threaded view
|

Re: 'float: before' and 'float: after' for easier styling of RTL languages

Tab Atkins Jr.
In reply to this post by Mats Blakstad
On Mon, Nov 23, 2015 at 4:21 PM, Mats Blakstad <[hidden email]> wrote:
> Is it possible to simplify floating of RTL languages?
>
> RTL languages changes the meaning of "left" and "right". Extra stylesheets
> are needed for RTL languages to make floating correct, it takes time to sit
> and revert all floating.
>
> It would be easier if we could make elements float "before" or "after", and
> then make it always float in correct directions depending on the dir
> attribute (dir="rtl" or dir="ltr").

This is already covered by the Logical Properties draft:
<https://drafts.csswg.org/css-logical-props/#float-clear>

(This spec is still in the experimental stage, but this is the plan of
record currently.)

~TJ