- From: Koji Ishii <kojiishi@gluesoft.co.jp>
- Date: Wed, 29 Jan 2014 17:57:34 +0000
- To: Shahar Or <mightyiampresence@gmail.com>
- CC: "www-style@w3.org" <www-style@w3.org>, "public-i18n-bidi@w3.org" <public-i18n-bidi@w3.org>, Yaron Shahrabani <sh.yaron@gmail.com>
- Message-ID: <82FBAEC5-91DA-4C7F-A446-8D64562C26DE@gluesoft.co.jp>
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.
Received on Wednesday, 29 January 2014 17:58:09 UTC