{"id":297472,"date":"2020-01-21T21:00:31","date_gmt":"2020-01-21T21:00:31","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=297472"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=297472","title":{"rendered":"RTL Styling 101 \u2014 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e RTL-\u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 CSS"},"content":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/484886\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-v\/kw\/2u\/-vkw2uufkj03he5tbdy-ztvor-4.jpeg\"><\/p>\n<p>  \u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u00ab<a href=\"https:\/\/www.rtlstyling.com\/posts\/rtl-styling\/\">RTL Styling 101 \u2014 An extensive guide on how to style for RTL in CSS<\/a>\u00bb \u0410\u0445\u043c\u0430\u0434\u0430 \u0428\u0430\u0434\u0438\u0434\u0430.<\/p>\n<p>  \u0411\u043e\u043b\u0435\u0435 292 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u043e\u0432 \u043b\u044e\u0434\u0435\u0439 \u0432\u043e \u0432\u0441\u0451\u043c \u043c\u0438\u0440\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043d\u0430 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c, \u043a\u0430\u043a \u043d\u0430 \u0440\u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u041a \u043d\u0438\u043c \u043e\u0442\u043d\u043e\u0448\u0443\u0441\u044c \u0438 \u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e \u0441\u0430\u0439\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043e\u0431\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430: \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e (LTR \u2013 Left To Right) \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e (Right To Left).<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 RTL-\u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e<\/h2>\n<p>  \u0412 CSS \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 LTR. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 html, \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 dir (\u0438\u043b\u0438 \u00abdirection\u00bb) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 ltr \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043c\u0435\u0436\u0434\u0443 LTR \u0438 RTL \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rq\/cj\/lf\/rqcjlfx9u9c-d_qqfycvvpd0aci.png\"><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0431\u043b\u043e\u043a RTL \u2013 \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 LTR, \u0442\u0435\u043a\u0441\u0442 \u0432 \u043d\u0451\u043c \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b \u0435\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u0414\u043b\u044f \u0441\u043c\u0435\u043d\u044b \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 dir. <\/p>\n<pre><code class=\"xml\">&lt;html dir=&quot;rtl&quot;&gt;...&lt;\/html&gt; <\/code><\/pre>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 dir \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0441\u043b\u0435\u0434\u043e\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u0430\u0431\u0437\u0430\u0446\u044b, \u0441\u0441\u044b\u043b\u043a\u0438, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>  \u0421\u0442\u043e\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 dir \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abauto\u00bb, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e HTML-\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438:  <\/p>\n<blockquote><p>\u0410\u0432\u0442\u043e\u0440\u044b \u043f\u0440\u0438\u0437\u044b\u0432\u0430\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u0438 \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u044d\u0442\u043e \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.  <\/p><\/blockquote>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/eYYqEwY?height=300%5E_%5Eamp%5E_%5Eslug-hash=eYYqEwY%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 HTML \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 dir=rtl, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c direction: rtl \u043a\u0430\u043a CSS-\u0441\u0442\u0438\u043b\u044c.<\/p>\n<pre><code class=\"css\">.element { direction: rtl; } <\/code><\/pre>\n<p>  \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, CSSWG (\u0440\u0430\u0431\u043e\u0447\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0430 CSS) \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0432\u0438\u0434\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0434\u043b\u044f \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 HTML, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0438 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043b\u0438 CSS.<\/p>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438<\/h2>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441 LTR \u043d\u0430 RTL.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yw\/v8\/b1\/ywv8b1jdx6ygdj8u1szm-ngl36m.jpeg\"><\/p>\n<pre><code class=\"xml\">&lt;article class=&quot;media&quot;&gt;   &lt;img class=&quot;media__photo&quot; src=&quot;blueberry-cheesecake.jpg&quot; alt=&quot;&quot;&gt;   &lt;div class=&quot;media__content&quot;&gt;     &lt;h2&gt;Blueberry Cheesecake&lt;\/h2&gt;     &lt;p&gt;...&lt;\/p&gt;     &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;link&quot;&gt;View Recipe&lt;\/a&gt;&lt;\/p&gt;   &lt;\/div&gt; &lt;\/article&gt; <\/code><\/pre>\n<p>  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u0442\u0430\u0440\u044b\u0439 \u0434\u043e\u0431\u0440\u044b\u0439 float, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u0432 LTR \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b clearfix.<\/p>\n<pre><code class=\"css\">.media:after {   content: &quot;&quot;;   display: block;   clear: both; }   .media img {   float: left;   width: 200px;   margin-right: 16px; } <\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c dir=\u00abrtl\u00bb \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0433\u043e \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0439 \u0442\u0435\u043a\u0441\u0442. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4q\/dz\/76\/4qdz76zxeuig4el7qkweuxb7ywe.jpeg\"><\/p>\n<p>  \u0412\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u043b\u0438\u0441\u044c \u043f\u043e \u043f\u0440\u0430\u0432\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043a\u0440\u043e\u043c\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e float: left \u0438 margin-right: 16px. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e, \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438<\/p>\n<pre><code class=\"css\">.media[dir=&quot;rtl&quot;] img {   float: right;   margin-right: 0;   margin-left: 16px; } <\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/wvvVrOw?height=300%5E_%5Eamp%5E_%5Eslug-hash=wvvVrOw%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h2>\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439 \u0438 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 LTR \u043c\u0430\u043a\u0435\u0442\u0435<\/h2>\n<p>  \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442, \u0435\u0441\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043c\u0435\u0441\u044c \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0445 \u0438 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0445 \u0441\u043b\u043e\u0432, \u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u2013 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 LTR? \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/8e\/0k\/hb\/8e0khbkevs_-ycssjcncuyzhdly.jpeg\"><\/p>\n<p>  \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u0413\u043e\u0432\u043e\u0440\u044f\u0449\u0438\u0445 \u043d\u0430 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0431\u0438\u0432\u0430\u0442\u044c \u0441 \u0442\u043e\u043b\u043a\u0443. \u0421\u043b\u043e\u0432\u0430 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435. \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441\u043f\u0440\u0430\u0432\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ng\/z5\/nn\/ngz5nnpidr17t-cgpwpag-8ldee.jpeg\"><\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044f\u0437\u044b\u043a\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 dir=\u00abrtl\u00bb, \u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3y\/j9\/kv\/3yj9kv6sk8yf9xwlwkx-entxhp4.jpeg\"><\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/GRRVMJd?height=300%5E_%5Eamp%5E_%5Eslug-hash=GRRVMJd%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0435\u0449\u0435 \u0431\u043e\u043b\u0435\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0434\u043b\u0438\u043d\u043d\u044b\u0439. \u041d\u0438\u0436\u0435 \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u043b \u0435\u0433\u043e \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u043c. \u042f \u0443\u043a\u0430\u0437\u0430\u043b \u0446\u0438\u0444\u0440\u0430\u043c\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u0421\u043d\u043e\u0432\u0430-\u0442\u0430\u043a\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441\u043f\u0440\u0430\u0432\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/di\/bk\/bs\/dibkbstpacbq2ih6hc-an0thva4.jpeg\"><\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0437\u0430\u0434\u0430\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 dir=\u00abrtl\u00bb, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c. \u0422\u043e \u0435\u0441\u0442\u044c, \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u0440\u0430\u043c\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c, \u0430 \u0441\u043b\u043e\u0432\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/de\/bt\/za\/debtza_j20sreslyhbkcicphvbg.jpeg\"><\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/gOOVBKZ?height=300%5E_%5Eamp%5E_%5Eslug-hash=gOOVBKZ%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h2>Flexbox<\/h2>\n<p>  Flexbox \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0440\u0435\u0436\u0438\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435. \u042d\u0442\u043e\u0442 \u0444\u0430\u043a\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0431\u043b\u043e\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0430\u043d\u0433\u043b\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0434\u0442\u0438 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0430 \u043d\u0430 \u043a\u0438\u0442\u0430\u0439\u0441\u043a\u043e\u043c \u2013 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437. \u0414\u043b\u044f \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u0438 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 writing-mode \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043b\u0443\u0436\u0438\u0442 horizontal-tb.<\/p>\n<p>  \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/writing-mode\">Mozilla Developer Network<\/a> (MDN), \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 horizontal-tb \u0437\u043d\u0430\u0447\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<blockquote><p>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437. \u041f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439.  <\/p><\/blockquote>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 RTL, flexbox \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0442\u043e\u043a \u0441\u0432\u043e\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e! \u041d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u043e\u0441\u044c flexbox \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 direction.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/a4\/6j\/ov\/a46jovycsbloxmsh-mq1e5s6cpe.jpeg\"><\/p>\n<p>  \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043f\u0440\u043e\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043b \u0438\u0445, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;element&quot;&gt;   &lt;div class=&quot;item&quot;^_^gt&#1;lt^_^\/div&gt;   &lt;div class=&quot;item&quot;^_^gt&#2;lt^_^\/div&gt;   &lt;div class=&quot;item&quot;^_^gt&#3;lt^_^\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.element {   display: flex;   flex-direction: row; \/* Default value, added for clarity *\/ } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/y2\/gc\/vb\/y2gcvburwjinp3tsiuk9djaav20.jpeg\"><\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/RwwXXbW?height=300%5E_%5Eamp%5E_%5Eslug-hash=RwwXXbW%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<h2>CSS Grid<\/h2>\n<p>  \u041a\u0430\u043a \u0438 flexbox, css grid \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0435\u0436\u0438\u043c\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0434\u0430\u0451\u0442 \u043d\u0430\u043c \u0442\u0435 \u0436\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u0438 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 flexbox.<\/p>\n<p>  \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u043b\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f LTR \u0431\u043b\u043e\u043a sidebar \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u043b\u0435\u0432\u0430, \u0430 main \u0441\u043f\u0440\u0430\u0432\u0430. \u0414\u043b\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f RTL \u2013 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c CSS Grid, \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c.<\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;element&quot;&gt;   &lt;div class=&quot;side&quot;&gt;Side&lt;\/div&gt;   &lt;div class=&quot;main&quot;&gt;Main&lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.element {   display: grid;   grid-template-columns: 220px 1fr;   grid-gap: 1rem; } <\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/LYEPPPb?height=300%5E_%5Eamp%5E_%5Eslug-hash=LYEPPPb%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h2>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043d\u0430 RTL \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043d\u0435 \u0432\u043b\u0430\u0434\u0435\u044e\u0449\u0438\u0435 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u043c, \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0440\u0430\u0437\u0443 \u0431\u0440\u043e\u0441\u0430\u044e\u0442\u0441\u044f \u0432 \u0433\u043b\u0430\u0437\u0430 \u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044f\u043c \u044f\u0437\u044b\u043a\u0430.<\/p>\n<h3>1. \u041c\u0435\u0436\u0431\u0443\u043a\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b (letter-spacing)<\/h3>\n<p>  \u0412 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 letter-spacing \u0434\u043b\u044f \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0435\u0436\u0431\u0443\u043a\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043b\u043e\u0432\u0430. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ar\/vr\/zd\/arvrzd-q0sodvcetrlsyy9kumk4.jpeg\"><\/p>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043c\u0435\u0436\u0431\u0443\u043a\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u0442\u0435\u043a\u0441\u0442\u0443 \u043d\u0430 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u043e. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k7\/wd\/cb\/k7wdcblinckxiwwklcvzpyiyiq0.jpeg\"><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u0442\u0435\u043a\u0441\u0442\u0435, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e letter-spacing \u0431\u0443\u043a\u0432\u044b \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u044b \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u042d\u0442\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u0410\u0440\u0430\u0431\u0441\u043a\u0438\u0435 \u0431\u0443\u043a\u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u043c\u0438, \u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u043c\u0435\u0436\u0431\u0443\u043a\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430, \u043a\u0430\u043a \u0438 \u0432 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c, \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u044d\u0442\u043e\u043c\u0443. \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043c\u043d\u043e\u0433\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u043c \u0441\u0430\u0439\u0442\u043e\u043c \u043d\u0435 \u0437\u0430\u0431\u044b\u043b\u0438 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e letter-spacing: 0.<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/xxbKZbB?height=300%5E_%5Eamp%5E_%5Eslug-hash=xxbKZbB%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<h3>2. \u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0430<\/h3>\n<p>  \u0412 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0441\u0430\u0439\u0442\u043e\u0432 \u0442\u0435\u043a\u0441\u0442 \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432\u0442\u043e\u0440\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u0443\u044e \u0437\u043d\u0430\u0447\u0438\u043c\u043e\u0441\u0442\u044c. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0430 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c, \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0438\u0437-\u0437\u0430 \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qz\/ox\/zc\/qzoxzcv0tberyocv5ikx9w09fjc.jpeg\"><\/p>\n<p>  \u041f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u0435\u0441\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0446\u0432\u0435\u0442 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438\u0437-\u0437\u0430 \u0438\u0445 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e letter-spacing \u043d\u0435 \u0431\u044b\u043b\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043e\u043d\u043e \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u2013 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0431\u0435\u0437 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 (\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 RGBa \u0438\u043b\u0438 opacity).<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/JjoPGyP?height=300%5E_%5Eamp%5E_%5Eslug-hash=JjoPGyP%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3>3. \u0420\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u043b\u043e\u0432 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445<\/h3>\n<p>  \u0418\u043d\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0441\u0430\u0439\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a, \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0435. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u0441\u044b\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0441\u0430\u0439\u0442\u0430 Smashing Magazine.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/0w\/tg\/qn\/0wtgqndoqgnunkypmk_nvtpyzpe.png\"><\/p>\n<p>  \u0412 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0441\u043b\u043e\u0432 \u0438\u043c\u0435\u044e\u0442 \u043f\u043e\u0447\u0442\u0438 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0440, \u043a\u0430\u043a \u0438\u0445 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0432\u043d\u044b \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438, \u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u2013 \u0431\u043e\u043b\u044c\u0448\u0435. \u0427\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435, \u0432\u043e\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 \u0438 \u0435\u0433\u043e \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/24\/bi\/zp\/24bizpyr5lfj7ptpfgkd0sfsfeg.png\"><\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u044c\u0441\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0433\u043e\u0432\u043e\u0440\u044e \u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u043b\u043e\u0432 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 LinkedIn.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mf\/p4\/6o\/mfp46oetaskor0tlo6icdvdqkxa.png\"><\/p>\n<p>  \u041a\u043d\u043e\u043f\u043a\u0430 \u00abDone\u00bb \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043d\u0430 \u043d\u0430 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0439 \u043a\u0430\u043a \u201c\u062a\u0645\u201d, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u043e. \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u0431\u044b\u043b\u043e \u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e min-width. \u042f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u043d\u0435\u043b\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ef\/ez\/wa\/efezwaxywrpmjg54vls_hmf0lz0.png\"><\/p>\n<p>  \u0410 \u0432\u043e\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 Twitter:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ui\/3w\/ak\/ui3wakn4vkjcbpb2tx5oj03tnvm.png\"><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0443 LinkedIn \u0438 Twitter \u0431\u044b\u043b\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u044b \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 (13 \u0434\u0435\u043a\u0430\u0431\u0440\u044f 2019 \u0433\u043e\u0434\u0430).<\/p>\n<h3>4. \u0423\u0441\u0435\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430<\/h3>\n<p>  \u041e\u0434\u043d\u0430\u0436\u0434\u044b \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0430\u0434 \u043c\u043d\u043e\u0433\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0435\u0439\u0441\u044f \u043a \u0443\u0441\u0435\u0447\u0435\u043d\u0438\u044e \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/0v\/pj\/mc\/0vpjmcjfxkmo4yrr9yxtncu6zjs.png\"><\/p>\n<p>  \u0423\u0441\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435. \u042d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0446\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u043d\u0435 \u0432 \u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0435. \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 dir=\u00abauto\u00bb, \u0438 \u0442\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438 \u043f\u0440\u0438\u043c\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 dir \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c.<\/p>\n<pre><code class=\"xml\">&lt;p dir=&quot;auto&quot;&gt;\u0623\u0647\u0644\u0627\u064b \u0648\u0633\u0647\u0644\u0627\u064b \u0628\u0643\u0645 \u0641\u064a \u0627\u0644\u0645\u0642\u0627\u0644 \u0627\u0644\u0630\u064a \u064a\u062a\u062d\u062f\u062b \u0639\u0646 \u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0644\u0644\u063a\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629&lt;\/p&gt; &lt;p dir=&quot;auto&quot;&gt;Welcome to the article that explains how to design for RTL pages.&lt;\/p&gt; <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bb\/mn\/uw\/bbmnuwfesb_b0tfwedyru03j-oc.png\"><\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/WNbNXrV?height=300%5E_%5Eamp%5E_%5Eslug-hash=WNbNXrV%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<h3>5. \u0412\u044b\u0431\u043e\u0440 \u043f\u043b\u043e\u0445\u043e\u0433\u043e RTL \u0448\u0440\u0438\u0444\u0442\u0430<\/h3>\n<p>  \u041d\u0430\u043b\u0438\u0447\u0438\u0435 RTL \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0430\u0439\u0442\u0430 \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c\u0441\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u0443\u0436\u043d\u043e \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u043e \u043e\u0442\u043d\u0435\u0441\u0442\u0438\u0441\u044c \u043a \u044d\u0442\u043e\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c. \u041f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0432\u044b\u0431\u043e\u0440\u0430 \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f Twitter:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zp\/ty\/4n\/zpty4n4spdy6fpqkbhpduvvkohm.png\"><\/p>\n<p>  \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0430\u0440\u0430\u0431\u043e\u0433\u043e\u0432\u043e\u0440\u044f\u0449\u0438\u0445, \u0441\u043b\u043e\u0432\u043e \u201c\u062a\u063a\u0631\u064a\u062f\u201d \u0442\u0440\u0443\u0434\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:  <\/p>\n<ul>\n<li> \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0448\u0440\u0438\u0444\u0442<\/li>\n<li> \u0436\u0438\u0440\u043d\u043e\u0441\u0442\u044c \u0443\u0445\u0443\u0434\u0448\u0430\u0435\u0442 \u0443\u0434\u043e\u0431\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c<\/li>\n<li> \u0442\u043e\u0447\u043a\u0438 \u0441\u043b\u043e\u0432\u0430 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043b\u0438\u0437\u043a\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u043a \u0431\u0443\u043a\u0432\u0430\u043c<\/li>\n<\/ul>\n<p>  \u042f \u043f\u0440\u0438\u0432\u0451\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ml\/qi\/1c\/mlqi1c_ieqfuddznvalpmyqmlny.png\"><\/p>\n<h3>6. \u0421\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0445\u0438\u043d\u0434\u0438 \u0438 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0445 \u0446\u0438\u0444\u0440<\/h3>\n<p>  \u0412 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0437\u0430\u043f\u0438\u0441\u0438 \u0447\u0438\u0441\u0435\u043b:  <\/p>\n<ul>\n<li>\u0425\u0438\u043d\u0434\u0438: \u0661 \u0662 \u0663 \u0664 \u0665 \u0666 \u0667 \u0668 \u0669 <\/li>\n<li> \u0410\u0440\u0430\u0431\u0441\u043a\u0438\u0439: 0 1 2 3 4 5 6 7 8 9<\/li>\n<\/ul>\n<p>  \u0427\u0438\u0441\u043b\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c, \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u044b \u043e\u0442 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0445: \u201c0, 1, 2, 3, 4, 5, 6, 7, 8, 9\u201d. \u0422\u0435\u043a\u0441\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0447\u0438\u0441\u043b\u0430, \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432: \u043b\u0438\u0431\u043e \u0445\u0438\u043d\u0434\u0438, \u043b\u0438\u0431\u043e \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c\u0443.<\/p>\n<blockquote><p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0412\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438:<br \/>  \u041f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u0415\u0432\u0440\u043e\u043f\u0435 \u0438 \u0410\u043c\u0435\u0440\u0438\u043a\u0435 \u0446\u0438\u0444\u0440\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u00ab\u0430\u0440\u0430\u0431\u0441\u043a\u0438\u043c\u0438\u00bb \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u044b \u0432 \u0415\u0432\u0440\u043e\u043f\u0435 \u0432 10 \u0432\u0435\u043a\u0435 \u0430\u0440\u0430\u0431\u043e\u0433\u043e\u0432\u043e\u0440\u044f\u0449\u0438\u043c\u0438 \u0432\u044b\u0445\u043e\u0434\u0446\u0430\u043c\u0438 \u0438\u0437 \u0421\u0435\u0432\u0435\u0440\u043d\u043e\u0439 \u0410\u0444\u0440\u0438\u043a\u0438.  <\/p><\/blockquote>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043c\u0435\u0441\u044c \u0445\u0438\u043d\u0434\u0438 \u0438 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0445 \u0447\u0438\u0441\u0435\u043b. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/nt\/i9\/6i\/nti96iq5tqhfzyo-ilibkm6c_2g.png\"><\/p>\n<h2>\u041c\u043e\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u0438 RTL<\/h2>\n<p>  <\/p>\n<h3>1. \u0412\u044b\u0441\u043e\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 (line-height)<\/h3>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e \u0434\u043b\u044f RTL \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435, \u043a\u0430\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043c\u0435\u0436\u0434\u0443 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 \u0434\u043b\u044f \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0434\u043b\u044f \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e, \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0438\u043c\u0435\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 line-height.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4e\/a2\/lw\/4ea2lwcgano29al4lyvg1aha8pe.png\"><\/p>\n<p>  \u0412\u0430\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f line-height \u0434\u043b\u044f \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/shadeed\/embed\/preview\/YzPKwJp?height=300%5E_%5Eamp%5E_%5Eslug-hash=YzPKwJp%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u0412 Twitter, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430, \u0441 \u043e\u0431\u0440\u0435\u0437\u0430\u043d\u043d\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c. \u041a\u0430\u043a \u0440\u0430\u0437, \u0438\u0437-\u0437\u0430 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f line-height.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fz\/1_\/4g\/fz1_4gc7qby_2zt2cvd9nrdrgak.png\"><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0439 \u0434\u0438\u0430\u043a\u0440\u0438\u0442\u0438\u043a \u043e\u0431\u0440\u0435\u0437\u0430\u043d. \u041e\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00ab\u043a\u0430\u0441\u0440\u0430\u00bb \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430. \u041d\u0430 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u044f \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043b \u0432\u044b\u0441\u043e\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e, \u043d\u0435 \u043e\u0431\u0440\u0435\u0437\u0430\u044f\u0441\u044c.<\/p>\n<h3>2. \u041f\u043e\u0434\u0447\u0451\u0440\u043a\u043d\u0443\u0442\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>  \u0421 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043e\u043a \u0438\u0437 CSS \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043b\u043e\u0445\u043e. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0432 \u0438 \u0431\u0443\u043a\u0432 \u0432 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0438 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kz\/pf\/m9\/kzpfm9q0npmks-oidsw4hwwfipy.png\"><\/p>\n<p>  \u042f \u043e\u0442\u043c\u0435\u0442\u0438\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u043a\u0440\u0443\u0433\u043e\u043c. \u041f\u043e\u0434\u0447\u0451\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u0447\u043a\u0438 \u0431\u0443\u043a\u0432. \u0412\u043e\u0442 \u043a\u0440\u0443\u043f\u043d\u044b\u0439 \u043f\u043b\u0430\u043d:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ts\/qv\/0z\/tsqv0zip-z7yfv4xn9ynf_hfjue.png\"><\/p>\n<p>  \u0422\u043e\u0447\u043a\u0438, \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u043a\u0440\u0443\u0433\u043e\u043c, \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043b\u0438\u043d\u0438\u0435\u0439 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f, \u0447\u0442\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0447\u0442\u0435\u043d\u0438\u0435. \u0420\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0447\u0451\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS. <\/p>\n<h4>2.1. \u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 (text-decoration)<\/h4>\n<p>  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0438 \u0446\u0432\u0435\u0442 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 text-decoration-style \u0438 text-decoration-color. \u041e\u0434\u043d\u0430\u043a\u043e, \u043d\u0435\u0442 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0438, \u0447\u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438, Firefox \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0441 \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0435\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u044d\u0442\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432.<\/p>\n<pre><code class=\"xml\">.link-2 {   text-decoration-color: rgba(21, 132, 196, 0.2);   text-decoration-style: normal;   text-underline-offset: 4px;   text-decoration-thickness: 2px; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/lg\/pt\/od\/lgptodjkts8ba16pfy5arhyqdlm.png\"><\/p>\n<h4>2.2 \u0422\u0435\u043d\u044c (box-shadow)<\/h4>\n<p>  \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 box-shadow \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u0443 text-decoration. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043d\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 text-decoration, \u0438 \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u043e\u043b\u0431\u044d\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 box-shadow.  <\/p>\n<pre><code class=\"css\"> .link-3 {   color: #000;   text-decoration-color: rgba(21, 132, 196, 0.2);   text-decoration-style: normal;   text-underline-offset: 4px;   text-decoration-thickness: 2px;   box-shadow: inset 0 -5px 0 0 rgba(#1584c4, 0.2); }   @supports (text-decoration-color: red){   .link-3 {     box-shadow: none;   } } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4a\/or\/bp\/4aorbplgnadbbej-r7zi-k2v2oe.png\">  <\/p>\n<h3>3. \u041f\u0435\u0440\u0435\u043d\u043e\u0441 \u0441\u0442\u0440\u043e\u043a\u0438<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e word-break, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u044c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ss\/ut\/4k\/ssut4kd6uyebqm_4hgwzb8pxd8g.png\"><\/p>\n<p>  \u041e\u0431\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u2013 \u044d\u0442\u043e \u0440\u0430\u0437\u043e\u0440\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u043c \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0435 \u0441\u043b\u043e\u0432\u0430 \u0438\u0437-\u0437\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f word-break. \u0410 \u0432 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0441\u043b\u043e\u0432 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u0443\u043a\u0432\u044b \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c.<\/p>\n<h3>4. \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u0412 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0434\u043d\u0435\u0439 \u043d\u0435\u0434\u0435\u043b\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u00abSaturday\u00bb \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u00abSat\u00bb.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/lw\/dv\/mf\/lwdvmfbyqls_mwijgract5yt3s8.png\"><\/p>\n<p>  \u0412 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c \u044d\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0431\u0443\u043a\u0432\u044b \u0441\u043b\u043e\u0432\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ce\/v_\/ns\/cev_nsog_gxdqpiv1bnny-rnlqi.png\"><\/p>\n<h2>\u0414\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u043a\u0438<\/h2>\n<p>  \u0421\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u043a\u0438 \u043d\u0435 \u043d\u0443\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043c\u0435\u0436\u0434\u0443 LTR \u0438 RTL \u043c\u0430\u043a\u0435\u0442\u0430\u043c\u0438. \u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/88\/ya\/im\/88yaimwgjthodx8qla8toq92np8.png\"><\/p>\n<p>  \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f, \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u043d\u0430\u0447\u043a\u043e\u0432 \u0432\u0430\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 RTL \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0430\u0439\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ha\/5a\/cm\/ha5acmaiixu9ajmzihotroe7-te.png\"><\/p>\n<h2>\u041f\u0435\u0440\u0435\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>  \u0420\u0430\u0431\u043e\u0442\u0430\u044f \u043d\u0430\u0434 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0445. \u0412 Sketch \u044f \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443 \u0435\u0433\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439. \u0422\u0430\u043a\u043e\u0439 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 Adobe XD \u0438 Figma<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_v\/1t\/a-\/_v1ta-jn2kd-ftp-ow9l6x_y7sw.png\"><\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u044f \u0438\u043c\u0435\u044e \u0432 \u0432\u0438\u0434\u0443, \u0432\u043e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0430\u044f, \u0447\u0442\u043e \u044f \u0434\u0435\u043b\u0430\u044e \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/x2\/xt\/uv\/x2xtuvzljtrxt4asyytidgwp5e4.gif\"><\/p>\n<h2>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0434\u043b\u044f RTL<\/h2>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 RTL.<\/p>\n<h3>\u0418\u043a\u043e\u043d\u043a\u0438 \u043a\u043d\u043e\u043f\u043e\u043a<\/h3>\n<p>  \u0412\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u043d\u044e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u0443\u044e \u0432 RTL \u043c\u0430\u043a\u0435\u0442\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/g0\/79\/qd\/g079qd7f6jpjmzffyhmqjv4ibye.png\"><\/p>\n<h3>\u041f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430<\/h3>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0444\u043e\u0440\u043c \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u043e \u043b\u0435\u0432\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0434\u0430\u0436\u0435 \u0432 RTL \u0440\u0435\u0436\u0438\u043c\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 email \u0438\u043b\u0438 \u043d\u043e\u043c\u0435\u0440\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/je\/en\/oz\/jeenoz8eutuuosgfjyxhkt3nv90.png\"><\/p>\n<h3>\u0425\u043b\u0435\u0431\u043d\u044b\u0435 \u043a\u0440\u043e\u0448\u043a\u0438<\/h3>\n<p>  \u0421\u0442\u0440\u0435\u043b\u043e\u0447\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c\u0438 \u0432 \u0445\u043b\u0435\u0431\u043d\u044b\u0445 \u043a\u0440\u043e\u0448\u043a\u0430\u0445 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0451\u0440\u043d\u0443\u0442\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pl\/i_\/6y\/pli_6yvere-qri-_p9qctzgjg_i.png\"><\/p>\n<h3>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0441\u0435\u043a\u0446\u0438\u0438. \u041e\u0431\u0435 \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0451\u0440\u043d\u0443\u0442\u044b \u0432 RTL<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uv\/-o\/kk\/uv-okkcmqllmtbli3bfy7z8k58o.png\"><\/p>\n<h3>\u0422\u0430\u0431\u043b\u0438\u0446\u044b<\/h3>\n<p>  \u0422\u0430\u0431\u043b\u0438\u0446\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0451\u0440\u043d\u0443\u0442\u044b<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/of\/oo\/em\/ofooemkzqakgijnjuyk93wjteeq.png\"><\/p>\n<h3>\u0417\u0430\u043a\u043b\u0430\u0434\u043a\u0438<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0430\u0445 \u0432 LTR \u0440\u0435\u0436\u0438\u043c\u0435 \u0438\u043a\u043e\u043d\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0432\u0430 \u043e\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u0432 RTL \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uh\/pl\/vy\/uhplvygkg-d_qkfvwya_bn05mfe.png\"><\/p>\n<h3>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430<\/h3>\n<p>  \u0414\u043b\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u0442\u0435\u043a\u0441\u0442 \u043d\u0443\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0432 RTL<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/v5\/ui\/e6\/v5uie6rx88n3hycnclhgfwmy1ia.png\"><\/p>\n<h3>\u0412\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u041a\u0430\u043a \u0432\u044b \u0438 \u043c\u043e\u0433\u043b\u0438 \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u0438\u043a\u043e\u043d\u043a\u0438 \u00ab\u0437\u0430\u043a\u0440\u044b\u0442\u044c\u00bb \u0438 \u00ab\u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435\u00bb \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0435\u0441\u0442\u0430\u043c\u0438<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zj\/5m\/st\/zj5mstcvbu4gb2opodiluwclw2g.png\"><\/p>\n<h2>\u041b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS<\/h2>\n<p>  <\/p>\n<blockquote><p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e MDN:<br \/>  \u041b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CSS \u2013 \u044d\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u044c, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0430\u043a\u0435\u0442\u043e\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445, \u0430 \u043d\u0435 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0438 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439.  <\/p><\/blockquote>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:  <\/p>\n<pre><code class=\"css\">.page-header {   text-align: right; } <\/code><\/pre>\n<p>  \u0410 \u0434\u043b\u044f RTL:  <\/p>\n<pre><code class=\"css\">[dir=&quot;rtl&quot;] .nav-item {   text-align: left; } <\/code><\/pre>\n<p>  \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u0431\u044b \u0431\u044b\u043b \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 text-align, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u043b\u043e \u0431\u044b \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b? \u041d\u0430 \u0432\u044b\u0440\u0443\u0447\u043a\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS!  <\/p>\n<pre><code class=\"css\">.page-header {   text-align: end; } <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438, \u0441\u0442\u043e\u0440\u043e\u043d\u0430, \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u0430\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c text-align, \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. <a href=\"https:\/\/codepen.io\/shadeed\/pen\/fb4e2f89ca23ab53f8b37112f027c85b?editors=1100\">\u0414\u0435\u043c\u043e<\/a><\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043b\u0435\u0433\u0447\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 start \u0438 end, \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0441\u0445\u0435\u043c\u0443 \u043d\u0438\u0436\u0435. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 start \u0440\u0430\u0432\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e left \u0432 LRT \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e right \u0432 RTL. \u0422\u043e \u0436\u0435 \u0441 end, \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xg\/ec\/ai\/xgecaifz58nexxewh8gcifbrw_m.png\"><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 CSS.<\/p>\n<h3>\u041b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 Padding<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/g5\/py\/ae\/g5pyaewdwl6zmczvtp3xtfdhtug.png\"><\/p>\n<p>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043f\u0440\u0430\u0432\u0430. \u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0434\u0430\u0442\u044c padding \u0441 \u043e\u0431\u0435\u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d. Padding \u0441\u043f\u0440\u0430\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0430 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<pre><code class=\"css\">.input--search {     padding-inline-start: 1rem;   padding-inline-end: 2.5rem; } <\/code><\/pre>\n<p>  <\/p>\n<h3>\u041b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 Margin<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/2q\/os\/7e\/2qos7ey_htk1ybc_br7ysvhxr1o.png\"><br \/>  Margin \u0441\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u0438\u043a\u043e\u043d\u043a\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e margin-inline-end.  <\/p>\n<pre><code class=\"css\">.page-header__avatar {     margin-inline-end: 1rem; } <\/code><\/pre>\n<p>  <\/p>\n<h3>\u041b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0430\u043c\u043a\u0438 (border)<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fs\/2a\/u2\/fs2au2bbcuo8ielzfrbmacqq87e.png\"><br \/>  \u0427\u0430\u0441\u0442\u043e \u0440\u0430\u043c\u043a\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0434\u043b\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0437\u0430\u0434\u0430\u043d\u0430 \u0440\u0430\u043c\u043a\u0430 \u0441 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432?<\/p>\n<pre><code class=\"css\">.nav__item {     border-inline-start: 3px solid transparent; }   .nav__item.is-active {   border-color: #1e9ada; } <\/code><\/pre>\n<p>  <\/p>\n<h3>\u041b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432 (border-radius)<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/st\/w4\/nb\/stw4nbznghys5sw9yuprhrrqqum.png\"><\/p>\n<p>  \u041d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432\u044b\u0448\u0435 \u0444\u043e\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438\u043c\u0435\u0435\u0442 \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0438 \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u043e\u0432. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<\/p>\n<pre><code class=\"css\">.nav__item {     border-start-end-radius: 30px;   border-end-end-radius: 30px;   background-color: transparent; }   .nav__item.is-active {   background-color: #ecf6fb; } <\/code><\/pre>\n<h3>\u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0447\u0451\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0432 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443 \u043d\u0438\u0436\u0435. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u043d\u0435\u0439 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 LTR \u0438 RTL \u0440\u0435\u0436\u0438\u043c\u0430\u043c\u0438. \u042f \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u044d\u0442\u0443 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 <a href=\"https:\/\/adrianroselli.com\/2019\/11\/css-logical-properties.html\">\u0441\u0442\u0430\u0442\u044c\u0438<\/a> \u0410\u0434\u0440\u0438\u0430\u043d\u0430 \u0420\u043e\u0441\u0435\u043b\u043b\u0438.<\/p>\n<p>  <a href=\"https:\/\/codepen.io\/shadeed\/pen\/2981e62691e67452d9f282a5351d7c79\">https:\/\/codepen.io\/shadeed\/pen\/2981e62691e67452d9f282a5351d7c79<\/a><\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0410\u0434\u0440\u0438\u0430\u043d \u0441\u043e\u0437\u0434\u0430\u043b \u0434\u0435\u043c\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u043c\u0435\u0436\u0434\u0443 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438.<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 37.4995%;\"><iframe src=\"https:\/\/codepen.io\/aardrian\/embed\/preview\/bGGxrvM?height=300%5E_%5Eamp%5E_%5Eslug-hash=bGGxrvM%5E_%5Eamp%5E_%5Edefault-tabs=css,result%5E_%5Eamp%5E_%5Ehost=https:\/\/codepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<h3>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h3>\n<p>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 padding, margin \u0438 text-align. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0449\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0430\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 border-radius. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441 \u0441\u0430\u0439\u0442\u0430 <a href=\"https:\/\/caniuse.com\/\">Can I Use<\/a>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oa\/0k\/p8\/oa0kp8irppfnbnkfn7iroinqxfs.png\"><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zd\/bl\/kb\/zdblkbmzozdi10lmre9ob0hb1ua.png\"><\/p>\n<p>  \u0414\u0430\u0436\u0435 \u043f\u0440\u0438 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0435\u0449\u0435 \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u0430\u044f (\u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a\u043e\u0432\u043e\u0439 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442), \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441 \u0444\u043e\u043b\u0431\u044d\u043a\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,<\/p>\n<pre><code class=\"css\">.input--search {     padding-left: 1rem;   padding-right: 2.5rem;   padding-inline-start: 1rem;   padding-inline-end: 2.5rem; } <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d <a href=\"https:\/\/github.com\/csstools\/postcss-logical\">PostCSS Logical<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u043e\u043b\u0431\u044d\u043a \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<h2>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u043e\u0431 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 CSS<\/h2>\n<p>  \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0434\u0430\u0432\u0430\u0442\u044c CSS-\u043a\u043b\u0430\u0441\u0441\u0430\u043c \u0438\u043c\u0435\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0438\u043c\u0435\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u044b \u0432 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;c-section&quot;&gt;   &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;see-link&quot;&gt;See more&lt;\/a&gt;&lt;\/p&gt; &lt;\/div&gt;   &lt;div class=&quot;c-section&quot;&gt;   &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;see-link&quot;&gt;Learn more&lt;\/a&gt;&lt;\/p&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412 \u043e\u0431\u043e\u0438\u0445 \u0431\u043b\u043e\u043a\u0430\u0445 \u0441\u0441\u044b\u043b\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435, \u043d\u043e \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0435. \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0431\u043b\u043e\u043a\u0435 \u043a\u043b\u0430\u0441\u0441 see-link \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430. \u0425\u043e\u0440\u043e\u0448\u0438\u043c \u0438\u043c\u0435\u043d\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c c-link. \u041f\u0440\u0438\u0441\u0442\u0430\u0432\u043a\u0430 c\u2013 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u044f \u043f\u0435\u0440\u0435\u043d\u044f\u043b \u0438\u0437 ITCSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438 \u0438\u0434\u0435\u044e, \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e \u043a RTL-\u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u0435\u043a\u0446\u0438\u044f \u0441 \u0434\u0432\u0443\u043c\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/o-\/q0\/aq\/o-q0aqslhidf4zlmfewnoulbyug.png\"><\/p>\n<p>  \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0438\u043c\u0435\u043d\u0430 \u0442\u0438\u043f\u0430 .c-page-header__left \u0438 .c-page-header__right, \u044f \u043d\u0430\u0437\u044b\u0432\u0430\u044e \u0438\u0445 .c-page-header__start \u0438 .c-page-header__end. \u042d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u0430\u0439\u0442 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 LTR \u0438\u043b\u0438 RTL \u0440\u0435\u0436\u0438\u043c\u0435.<\/p>\n<h2>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438<\/h2>\n<p>  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0449\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 LTR \u0438 RTL \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439.<\/p>\n<h3>1. Bi-App-Sass<\/h3>\n<p>  <a href=\"https:\/\/github.com\/anasnakawa\/bi-app-sass\">Bi-App-Sass<\/a> \u043e\u0442 \u0410\u043d\u0430\u0441\u0430 \u041d\u0430\u043a\u0430\u0432\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0434\u0432\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439: \u043e\u0434\u043d\u0430 \u0434\u043b\u044f LRT, \u0434\u0440\u0443\u0433\u0430\u044f \u0434\u043b\u044f RTL \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438.<\/p>\n<p>  \u042d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u0431\u043b\u0438\u0446 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:   <\/p>\n<pre><code class=\"css\">.elem {   display: flex;   @include margin-left(10px);   @include border-right(2px solid #000); } <\/code><\/pre>\n<p>  \u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 CSS \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c.<\/p>\n<p>  \u0424\u0430\u0439\u043b app-ltr.css:  <\/p>\n<pre><code class=\"css\">.elem {   display: flex;   margin-left: 10px;   border-right: 2px solid #000; } <\/code><\/pre>\n<p>  \u0424\u0430\u0439\u043b app-rtl.css:  <\/p>\n<pre><code class=\"css\">.elem {   display: flex;   margin-right: 10px;   border-left: 2px solid #000; } <\/code><\/pre>\n<p>  \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u043e\u0434\u043d\u0430\u043a\u043e, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043a\u043e\u043c\u043c\u0438\u0442 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 GitHub \u0431\u044b\u043b \u0447\u0435\u0442\u044b\u0440\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 (\u041d\u043e\u044f\u0431\u0440\u044c 2015).<\/p>\n<h3>2. RTLCSS<\/h3>\n<p>  <a href=\"https:\/\/rtlcss.com\/\">RTLCSS<\/a> \u043e\u0442 \u041c\u043e\u0445\u0430\u043c\u0435\u0434\u0430 \u0419\u043e\u043d\u0435\u0441\u0430 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f LTR \u0442\u0430\u0431\u043b\u0438\u0446 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 RTL.<\/p>\n<p>  \u041e\u0442\u043b\u0438\u0447\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u0443\u0436\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 CSS-\u0444\u0430\u0439\u043b\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 50+ Sass-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, RTLCSS \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e CSS-\u0444\u0430\u0439\u043b\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0437 \u043d\u0435\u0433\u043e RTL \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<h2>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/h2>\n<p>  <\/p>\n<h3>\u0428\u0430\u043f\u043a\u0430 \u0441\u0430\u0439\u0442\u0430<\/h3>\n<p>  \u042f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u043c\u0430\u043a\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 RTL-\u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/di\/nx\/br\/dinxbr4rpo8gdqkts4t_1uqk9no.png\"><\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0448\u0430\u043f\u043a\u0438. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u043a\u043e\u0434\u0435, \u044f \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u043b \u0435\u0433\u043e \u043e\u0431\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u0448\u0430\u043f\u043a\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0441\u0435\u043a\u0446\u0438\u044e \u0438 \u043f\u043e\u0434\u0441\u0435\u043a\u0446\u0438\u044e. \u0422\u0430\u043a\u0436\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qp\/_z\/kd\/qp_zkdcmkokstt5wg-iskyxolvq.png\"><\/p>\n<pre><code class=\"css\">.header__main, .header__sub {     display: flex;     justify-content: space-between; } <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u0430 CSS Flexbox \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043a\u0430\u043a \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u044c\u0448\u0435 \u0432 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435, \u043e\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u043f\u0440\u0438 RTL-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/6_\/-e\/5m\/6_-e5mz9lcd4cp4lm1i3jta-90k.png\"><\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u2013 \u044d\u0442\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u043c \u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0434\u0443\u043c\u0430\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c border-right. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e. \u041b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u0432\u0441\u043b\u0435\u0434 \u0437\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yb\/du\/hn\/ybduhnzjcff-sksfs2c508lbvye.png\"><\/p>\n<pre><code class=\"css\">.c-brand:after {   content: &quot;&quot;;   display: inline-block;   vertical-align: middle;   width: 3px;   height: 38px;   border-radius: 5px;   background: #e4e4e4;   margin-inline-start: 1.25rem; } <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ze\/ad\/4a\/zead4au_sau0iafpv4z4_wz6day.png\"><\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u044f \u0431\u0443\u0434\u0443 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 (\u0442\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u043e\u0434\u0441\u0435\u043a\u0446\u0438\u0438 \u0448\u0430\u043f\u043a\u0438 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0438). \u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043c\u0430\u043a\u0435\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432 LTR.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_r\/ce\/4r\/_rce4rhshg4e-zkpvcxyg95kdss.png\"><\/p>\n<p>  \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 padding \u0438 margin. \u0412\u043e\u0442 \u043c\u0430\u043a\u0435\u0442, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u043e:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vb\/af\/h1\/vbafh1gdpkw0et0g8fsqdxkcq5a.png\"><\/p>\n<pre><code class=\"css\">.topics-heading {   margin-inline-end: 1.5rem; }   .topics-list {   margin-inline-end: 1rem; }   .c-topic {   padding-inline-start: 0.5rem; }   .c-topic:not(:last-child) {   margin-inline-end: 10px; }   .c-topic__counter {   margin-inline-start: 1rem; } <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS \u0432\u043c\u0435\u0441\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 left \u0438 right.<\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u00abSee All\u00bb. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0435\u043b\u043a\u0443 \u0432 \u043a\u043e\u043d\u0446\u0435. \u0423 \u043d\u0435\u0451 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435:  <\/p>\n<ul>\n<li>\u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0446\u0432\u0435\u0442 \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f <\/li>\n<li> \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438, \u043a \u0441\u0442\u0440\u0435\u043b\u043a\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/li>\n<\/ul>\n<p>  \u042f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 SVG \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.\u041a\u043e\u0433\u0434\u0430 \u0437\u0430\u0434\u0430\u043b \u0441\u0442\u0440\u0435\u043b\u043a\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 translate, \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0441\u044f \u043e\u0431 RTL. \u041d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0438 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u041f\u043e\u0434\u043e\u0448\u0435\u043b \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c margin.<\/p>\n<pre><code class=\"css\">.c-link svg {   margin-inline-start: 4px;   transition: 0.15s ease-in; }   .c-link:hover svg {   margin-inline-start: 8px; } <\/code><\/pre>\n<p>  \u0425\u043e\u0442\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 margins \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0432\u0441\u0451 \u0436\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0414\u0440\u0443\u0433\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f  <\/p>\n<pre><code class=\"css\">.c-link:hover svg {   transform: translateX(6px); }   \/* I\u2019m using dir=rtl in the header for the purpose of clarity. It should be added to the root element. *\/ .c-header[dir=&quot;rtl&quot;] .c-link svg {   transform: scaleX(-1); }   .c-header[dir=&quot;rtl&quot;] .c-link:hover svg {   transform: scaleX(-1) translateX(6px); } <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u043b\u044f RTL \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b scaleX(-1), \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c rotate(180deg), \u043d\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u043c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xe\/v6\/lr\/xev6lrskrifiyt1qqf9f-l36yiq.gif\"><\/p>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u0438\u0434\u0451\u0442 \u043f\u043e\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u0430. \u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:  <\/p>\n<ul>\n<li>\u0418\u043a\u043e\u043d\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u043e\u043b\u044f <\/li>\n<li> \u0420\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.c-input--search {   background-image: url(&quot;data:image\/svg+xml...&quot;);   background-position: right 6px center; }   .c-header[dir=&quot;rtl&quot;] .c-input--search {   \/* We replace the original icon with a flipped one. *\/   background-image: url(&quot;data:image\/svg+xml...&quot;);   background-position: right 6px center; } <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u0435, \u0442\u0435\u043a\u0441\u0442 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u043c padding \u0441 \u043e\u0431\u0435\u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d \u043f\u043e\u043b\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qc\/z_\/hz\/qcz_hzyxa9ugihdig7utv9t-lc4.png\"><\/p>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u043b\u044f LTR \u0438 RTL \u0440\u0435\u0436\u0438\u043c\u043e\u0432:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/r0\/e1\/0z\/r0e10zrjj3qrcqkrqsfge6ep1ly.png\"><\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438\u0434\u0451\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e. \u0414\u043b\u044f \u0435\u0433\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0430\u043c\u0431\u0443\u0440\u0433\u0435\u0440-\u0438\u043a\u043e\u043d\u043a\u0443. \u0420\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (LTR \u0438\u043b\u0438 RTL). \u0422\u043e \u0436\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gm\/yc\/nd\/gmycndbd944q4kkpeuh708vfcsc.png\"><\/p>\n<p>  \u041e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/aa0c9f6c73fe62d206b674c52dc4426e?editors=0100\">\u0434\u0435\u043c\u043e<\/a> \u043c\u043e\u0436\u043d\u043e \u043d\u0430 CodePen<\/p>\n<h2>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u044c<\/h2>\n<p>  \u041e\u0441\u043e\u0431\u0430\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0435\u0439 \u0436\u0435\u043d\u0435 <a href=\"https:\/\/twitter.com\/kholoud840\">Kholoud<\/a> \u0437\u0430 \u0435\u0451 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0432\u044b\u0447\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430. \u0422\u0430\u043a\u0436\u0435 \u0432\u044b\u0440\u0430\u0436\u0430\u044e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u044c <a href=\"https:\/\/twitter.com\/AdebiyiAL\">Adebiyi Adedotun Lukman<\/a> \u0438 <a href=\"https:\/\/twitter.com\/simevidas\">\u0160ime Vidas<\/a> \u0437\u0430 \u0438\u0445 \u043f\u043e\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0437\u044b\u0432.<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/484886\/\"> https:\/\/habr.com\/ru\/post\/484886\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/484886\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-v\/kw\/2u\/-vkw2uufkj03he5tbdy-ztvor-4.jpeg\"><\/p>\n<p>  \u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u00ab<a href=\"https:\/\/www.rtlstyling.com\/posts\/rtl-styling\/\">RTL Styling 101 \u2014 An extensive guide on how to style for RTL in CSS<\/a>\u00bb \u0410\u0445\u043c\u0430\u0434\u0430 \u0428\u0430\u0434\u0438\u0434\u0430.<\/p>\n<p>  \u0411\u043e\u043b\u0435\u0435 292 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u043e\u0432 \u043b\u044e\u0434\u0435\u0439 \u0432\u043e \u0432\u0441\u0451\u043c \u043c\u0438\u0440\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043d\u0430 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c, \u043a\u0430\u043a \u043d\u0430 \u0440\u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u041a \u043d\u0438\u043c \u043e\u0442\u043d\u043e\u0448\u0443\u0441\u044c \u0438 \u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e \u0441\u0430\u0439\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043e\u0431\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430: \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e (LTR \u2013 Left To Right) \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e (Right To Left).  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-297472","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/297472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=297472"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/297472\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=297472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=297472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=297472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}