Re: [css-writing-modes] Features to make bidi almost automatic

Copying Tab’s response to this forked thread:

On Dec 2, 2013, at 13:36, Tab Atkins Jr. <jackalmage@gmail.com<mailto:jackalmage@gmail.com>> wrote:

On Mon, Dec 2, 2013 at 9:56 AM, Shahar Or <mightyiampresence@gmail.com<mailto:mightyiampresence@gmail.com>> wrote:
First, the concept that any attribute that has horizontal
directionality as a possible value (like `float: right;`) should have
a possible value of something like `with` and `against`. Let me
explain why with an example:

Yup, we've been intending to do this for a long time.  We already have
established direction-dependent names: "start" and "end".

Let's say we have an element that in LTR should float right (like a
photo in an article) and in RTL should float to the opposite
direction, left.

```
<div class="article" lang="en" dir="ltr">
   <img alt="Article photo" src="photo.jpg" />
   <p>Some english text.</p>
</div>

In this case, you'd use "float:end;".

~TJ


On Dec 2, 2013, at 22:52, Shahar Or <mightyiampresence@gmail.com<mailto:mightyiampresence@gmail.com>> wrote:

Excuse me - just adding a proper subject line and adding public-i18n-bidi@w3.org<mailto:public-i18n-bidi@w3.org>.

On 2 December 2013 19:56, Shahar Or <mightyiampresence@gmail.com<mailto:mightyiampresence@gmail.com>> wrote:
Hi,
I'm not a software engineer (yet), nor have I ever been involved in
any kind of standards establishment process.

Excuse me for not following any guidelines.

I do believe that I have some valuable input on bidi support in CSS.

My insight, as a beginner web designer is that CSS is missing a few
features that can make the bidi web designer's work a *whole lot*
easier.

And frankly, I'm surprised that they aren't yet implemented, and I
wouldn't be surprised if I wasn't the first to conceive them.

First, the concept that any attribute that has horizontal
directionality as a possible value (like `float: right;`) should have
a possible value of something like `with` and `against`. Let me
explain why with an example:

Let's say we have an element that in LTR should float right (like a
photo in an article) and in RTL should float to the opposite
direction, left.

```
<div class="article" lang="en" dir="ltr">
    <img alt="Article photo" src="photo.jpg" />
    <p>Some english text.</p>
</div>
```

And the style would be:

```
.article img {
    float: right;
}
```

Now, if we would want to make this site bidi, containing both LTR and
RTL articles:

```
<div class="article" lang="en" dir="ltr">
    <img alt="Article photo" src="photo.jpg" />
    <p>Some english text.</p>
</div>
<div class="article" lang="he" dir="rtl">
    <img alt="תמונת כתבה" src="photo.jpg" />
    <p>קצת מלל בעברית.</p>
</div>
```

We would have to make overrides for the style of the floating image:

```
.article img {
    float: right;
}
[dir="rtl"].article img {
    float: left;
}
```

Let me be clear that this duplication of code is *the* common way in
which bidirectional sites are designed. It seems to be the shortest
way to achieve the required result. And let me be also clear, that
across a whole site, this sums up to quite a lot of code just for
overriding the horizontally-determined, shall I call them, or
directionality-relevant declarations. Imagine all the left and right
margins, the paddings, the background-positions, the floats, the
`right:` and `left:` declarations and so on.

So, in order to remedy this I would suggest a twist on the plot:

What if, as I wrote earlier, there was a `with` or `against` value,
that would set the effective direction of a float, for example, to the
right or to the left, according to the direction property of the
element. So, for example, our image float's style would only have to
be:

```
.article img {
    float: with;
}
```

And if the img's direction is ltr, inherited from it's parent div's
dir attribute, it would be effectively float:right (with direction)
and if it is rtl, it would effectively float:left (again, with
direction).

I think that all bidirectional web designers would be overjoyed about this.

I realise that this solves only a part of the issue, because with
positional values like `margin: top right bottom left` a different
solution would be required and for me, it seems rather easy but may
entail some backward compatibility issues:

When directionality is rtl, the values would be calculated as `top
left bottom right`. Simple, elegant, amazingly effective.

I can also suggest that for the `left` and `right` attributes, that
they would be treated as the opposite direction when the element is
rtl.

This is my two cent, as a beginner rtl web designer.