[csswg-drafts] css attributes/values for full bidirectional support styles Proposal

Bamieh has just created a new issue for https://github.com/w3c/csswg-drafts:

== css attributes/values for full bidirectional support styles Proposal ==
Hello,

This proposal aims to implement bidirectional css attributes that accounts for css direction. similar to `text-align: right` and `text-align: left`.

This feature is inspired by the `text align` attribute (with right and left values) as it accounts for the parent's direction attribute, making it perfect for multi-direction multi-language support.
start edge in the appropriate axis.

This goal is to reduce the duplication of css attributes(or multiple sheets) needed to support multi-languages in a single web page. only changing the direction of the top level will reflect on all the dynamic attributes.

Implementing this technique will greatly reduce the reliance for precompiles to generate double css files for multi-directional languages.

The new attributes look for a direction css or html attribute, preferred at the top level of the app (on the body tag).

if no direction is found, default direction is `ltr` which is the most commonly used among languages such as english.







# New attraibutes and values

- `start` is translated into "start edge in the appropriate axis."
- `end` is translated into "end edge in the appropriate axis."
- In `ltr` direction: `start` is translated into "left", and `end` is translated into "right".
- In `rtl` direction: `start` is translated into "right", and `end` is translated into "left".

Bidi supporting attributes happens on the key of the attribute, or its value.

Notice that all the changes affect already existing attributes, only adding keys or values to support inheriting from same or top level direction attribute.

## bidi supporting "values"

1. text-align (already in the spec)
```css
text-align: start;
text-align: end;
```
2. float
```css
float: start;
float: end;
```
3. transform-origin
```css
transform-origin: start;
transform-origin: end;
```


## bidi supporting "keys"

1. margins and paddings
```css
margin-start: x;
margin-end: x;
padding-start: x;
padding-end: x;
```

2. positions
```css
start: x;
end: x;
```

3. borders
```css
border-start: x;
border-start-width: x;
border-start-style: x;
border-start-color: x;
border-end: x;
border-end-width: x;
border-end-style: x;
border-end-color: x;
```

4. border-radius
```css
border-top-start-radius: x;
border-top-end-radius: x;
border-bottom-start-radius: x;
border-bottom-end-radius: x;
```

Cheers!


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1197 using your GitHub account

Received on Monday, 10 April 2017 10:32:42 UTC