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

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

On 2 December 2013 19:56, Shahar Or <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.
>