-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (146 loc) · 5.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimise your layout for RTL languages</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>
Optimise your layout for RTL languages
</h1>
<button id="ltrButton">LTR</button>
<button id="rtlButton" class="try-me">RTL</button>
<nav>
<ul class="menu">
<li><a class="menu__item" href="#section-alignment">Alignment</a></li>
<li><a class="menu__item" href="#section-margins">Spacing</a></li>
<li><a class="menu__item" href="#section-columns">Columns</a></li>
</ul>
</nav>
</div>
</header>
<main class="container">
<section class="section">
<h2>Usage</h2>
<p>Set <strong>dir</strong> attribute in HTML tag to display proper layout direction. </p>
<pre><code>
<html dir="rtl" lang="en"></html>
</code></pre>
<p> The browser will show a proper layout if you follow the best practices for directional layout building. Try
the buttons on header to test.</p>
<h3>Best practices</h3>
<div class="grid-2--md gap">
<div>
<h4>Don't</h4>
<ul>
<li>Bootstrap column system or similar based in floats</li>
<li>Horizonal padding/margin for spacing purposes</li>
<li>Text alignment based on left/right</li>
</ul>
</div>
<div>
<h3>Do</h3>
<ul>
<li>Grid/flex containers for layouts</li>
<li>Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties#properties_for_margins_borders_and_padding"> logic properties</a> for spacing: margin-inline-start, margin-inline-start, padding-inline-start, padding-inline-end</li>
<li>Text alignment based on start/end <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">flow relative values</a></li>
</ul>
</div>
</div>
<h4>Well, I can't refactor the layout right now:</h4>
<!-- <p>Here an example of how to modify your directional classes. Take into account that what is <strong>left</strong>
must be converted to <strong>right</strong> and vice versa in RTL direction so we can create conditional classes
using the
cascade:</p>
<pre class="grid-2--md"><code>
html[dir="rtl"] {
.text-align-left {
text-align: right;
}
}
</code>
<code>
.my-component {
margin-right: 24px;
html[dir="rtl"] &{
margin-right: initial;
margin-left: 24px;
}
</code></pre> -->
</section>
<h2>Issue points</h2>
<section class="section" id="section-alignment">
<h3>Alignment</h3>
<div class="grid-2--md gap">
<div class="">
<h4>Tradicional alignment</h4>
<p>text-align: left;</p>
<p>text-align: right;</p>
<div class="column negative">
<div class="box text-align--left">Align left</div>
<div class="box text-align--right">Align right</div>
</div>
</div>
<div class="">
<h4>Logical values</h4>
<p>text-align: start;</p>
<p>text-align: end;</p>
<div class="column positive">
<div class="box text-align--start">Align start</div>
<div class="box text-align--end">Align end</div>
</div>
</div>
</div>
</section>
<h3 id="section-margins">Margin rigth / left for horizontal spacing</h3>
<section class="section grid-2--md gap">
<div class="">
<h4>Margin right/left</h4>
<p>margin-right: 40px</p>
<div class="flex">
<div class="box negative margin--right d-inline">margin-right</div>
<div class="box negative margin--right d-inline">margin-right</div>
</div>
</div>
<div class="margin--top">
<h4>Margin inline start/end</h4>
<p>margin-inline-end: 40px</p>
<div class="flex">
<div class="box positive margin-inline-end">margin-inline-end</div>
<div class="box positive margin-inline-end">margin-inline-end</div>
</div>
</div>
</section>
<h3 id="section-paddings">Padding rigth / left</h3>
<section class="section grid-2--md gap">
<div class="">
<h4>padding right/left</h4>
<p>padding-left: 40px</p>
<div class="box negative padding--left col-6">padding-left</div>
<div class="box negative padding--left col-6">padding-left</div>
</div>
<div class="margin--top">
<h4>Padding inline start/end</h4>
<p>padding-inline-start: 40px</p>
<div class="flex">
<div class="box positive padding-inline-start">padding-inline-start</div>
<div class="box positive padding-inline-start">padding-inline-start</div>
</div>
</div>
</section>
<!-- <section>
<h2>Support</h2>
<h3>Flow relative values: text-align-start & text-align-end</h3>
<iframe src="https://caniuse.com/mdn-css_properties_text-align_flow_relative_values_start_and_end" width="100%" height="600" frameborder="0"></iframe>
<h3>Logical properties: margin-inline-start / margin-inline-end / padding-inline-start / padding-inline-end</h3>
<iframe src="https://caniuse.com/css-logical-props" width="100%" height="700" frameborder="0"></iframe>
</section> -->
</main>
<footer><a href="https://github.com/nabaroa/">With ♡ by nabaroa</a></footer>
<script src=" main.js"></script>
</body>
</html>