4 ms·

The article touches on having properties like borders and margins that accommodate the language, but all the examples are manually calculated. I recently saw a

by memco 6y ago

The article touches on having properties like borders and margins that accommodate the language, but all the examples are manually calculated. I recently saw a talk on Youtube that mentioned that there is (or is coming?) support for margin-start/end kind of syntax that will allow browsers to handle re-orientation of box properties depending on the language. Sadly, can't find it. It was by a pair of people from the Chrome and Edge teams updating on some new features coming. Obviously browser support and awareness will take time to normalize these patterns, but it will help remove the need for many of these manual considerations, which means that support for internationalization should improve in the coming years.

wilsmex 6y ago
You’re thinking of CSS Logical Properties, and they are super cool: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical...
chrismorgan 6y ago
I’m confused. The feature you describe is logical properties, which is exactly what the section you’re talking about is about. I don’t know what you mean by “manually calculated”.
- memco 6y ago
  Indeed! I guess I was confused by the organization of the example[0] for that section. The physical section being first obscures all the examples of the logical block style so all you see is variations of: border-top-color: tomato; border-right-color: limegreen; border-bottom-color: dodgerblue; border-left-color: gold; Looking back, my comment was more due to my own inability to visualize the simplicity of the logical properties as presented vs. what I've seen in other demonstrations and realizing that I lost sight of a resource that I think would be a helpful reference for myself as this new method becomes commonplace. [0]: https://codepen.io/huijing/pen/XWmKByZ https://codepen.io/huijing/pen/XWmKByZ

by memco 6y ago

wilsmex 6y ago

You’re thinking of CSS Logical Properties, and they are super cool: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical...

chrismorgan 6y ago

I’m confused. The feature you describe is logical properties, which is exactly what the section you’re talking about is about. I don’t know what you mean by “manually calculated”.

memco 6y ago
Indeed! I guess I was confused by the organization of the example[0] for that section. The physical section being first obscures all the examples of the logical block style so all you see is variations of: border-top-color: tomato; border-right-color: limegreen; border-bottom-color: dodgerblue; border-left-color: gold; Looking back, my comment was more due to my own inability to visualize the simplicity of the logical properties as presented vs. what I've seen in other demonstrations and realizing that I lost sight of a resource that I think would be a helpful reference for myself as this new method becomes commonplace. [0]: https://codepen.io/huijing/pen/XWmKByZ https://codepen.io/huijing/pen/XWmKByZ