<?xml version="1.0" encoding="utf-8"?> 
<rss version="2.0"
  xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
  xmlns:atom="http://www.w3.org/2005/Atom">

<channel>

<title>Кирилл Беляев: заметки с тегом код</title>
<link>https://www.kirillbelyaev.com/ru/blog/?go=tags/kod/</link>
<description>о подаче информации, айдентике, интерфейсах и жизненной среде</description>
<author>Кирилл Беляев</author>
<language>ru</language>
<generator>E2 (v3572; Aegea)</generator>

<itunes:owner>
<itunes:name>Кирилл Беляев</itunes:name>
<itunes:email></itunes:email>
</itunes:owner>
<itunes:subtitle>о подаче информации, айдентике, интерфейсах и жизненной среде</itunes:subtitle>
<itunes:image href="" />
<itunes:explicit></itunes:explicit>

<item>
<title>Туннельтех на китайском</title>
<guid isPermaLink="false">713</guid>
<link>https://www.kirillbelyaev.com/ru/blog/?go=all/tunneltech-china/</link>
<pubDate>Fri, 28 Dec 2018 12:19:20 +0300</pubDate>
<author>Кирилл Беляев</author>
<comments>https://www.kirillbelyaev.com/ru/blog/?go=all/tunneltech-china/</comments>
<description>
&lt;p&gt;Во время основной работы над сайтом Туннельтеха часа два обсуждали, как устроить языковые версии: отдельные текстовые файлы, чтобы переводчикам было удобнее или хранение всех языков в теле документа и выгрузка в таблицу для переводчиков. Я боялся, что работать с файлами, которые внутри хранят текст на всех языках, будет неудобно. А &lt;a href="http://anatolyburov.ru"&gt;Толя&lt;/a&gt; объяснял, что так проще найти и исправить ошибку, а неудобно работать с длинным файлом будет единоразовым. В итоге он придумал теги, с помощью которых шаблонизатор на Питоне собирал отдельные языковые страницы из одного ХТМЛ-родителя. Шаблонизатор позволяет хранить внутри тегов не только текст, но и ХТМЛ. Этим пользуемся, когда для разных языков нужна разная вёрстка. В английской версии метры и футы, в остальных — только метры:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.kirillbelyaev.com/ru/blog/pictures/tunneltech-html-lang@2x.png" width="540" height="410" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Правила у тегов простые:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.kirillbelyaev.com/ru/blog/pictures/tunneltech-lang@2x.png" width="504" height="789" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Скрипт собирает весь текст в единую таблицу, в которую переводчики после добавляют перевод. Второй скрипт расставляет переведённый текст по файлам. На добавление китайской версии из таблицы с переводами у Толи ушло минут двадцать чистого времени.&lt;/p&gt;
&lt;p&gt;Вспомнил я это потому, что появились испанская и китайская версии. Испанский не сильно меняет образ страницы, не то что китайский. Не знаю, что скажут китайцы, но внутри отдела мы в восторге. Отдельно радует, что дизайн, вёрстка и языковой шаблонизатор выдерживают крайне достойно.&lt;/p&gt;
&lt;p&gt;Скриншоты двух страниц, если лень идти &lt;a href="http://tunneltech.eu"&gt;на сайт&lt;/a&gt;:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.kirillbelyaev.com/ru/blog/pictures/tunneltech-cn-hi-tech@2x.jpg" width="1395" height="1419" alt="" /&gt;
&lt;/div&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.kirillbelyaev.com/ru/blog/pictures/tunneltech-cn-models@2x.jpg" width="1395" height="1990" alt="" /&gt;
&lt;/div&gt;
</description>
</item>

<item>
<title>Пробелы</title>
<guid isPermaLink="false">633</guid>
<link>https://www.kirillbelyaev.com/ru/blog/?go=all/spaces/</link>
<pubDate>Tue, 15 May 2018 09:34:27 +0300</pubDate>
<author>Кирилл Беляев</author>
<comments>https://www.kirillbelyaev.com/ru/blog/?go=all/spaces/</comments>
<description>
&lt;p&gt;После заметки &lt;a href="http://kirillbelyaev.com/all/zero-width-characters/"&gt;о символах нулевой ширины&lt;/a&gt; собрал свою таблицу пробелов. Добавил символы нулевой ширины, короткие мнемоники, аннотации, скрипт для копирования, чтобы не целиться, и сгруппировал. В аннотациях — только применение.&lt;/p&gt;
&lt;div class="e2-text-table"&gt;&lt;table class="space-table"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th colspan="2"&gt;&lt;p&gt;→ Неразрывность&lt;/p&gt;
&lt;/th&gt;&lt;th&gt;&lt;p&gt;ХТМЛ&lt;/p&gt;
&lt;/th&gt;&lt;th&gt;&lt;p&gt;Мнемоника&lt;/p&gt;
&lt;/th&gt;&lt;th colspan="2"&gt;&lt;p&gt;АйОС и Андройд&lt;/p&gt;
&lt;/th&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td colspan="3"&gt;&lt;p&gt;&lt;b&gt;С нулевой шириной&lt;/b&gt;&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st1')"&gt;Zero Width &lt;strong id="st1"&gt;&amp;#8203;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td2"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td2')"&gt;&amp;&lt;span&gt;#8203;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td id="td2u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td2u')"&gt;\u200B&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;При выравнивании по ширине растягивается, как другие пробелы. В языках без пробелов отмечает границы слов&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;p&gt;→&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st1')"&gt;Word &lt;strong id="st19"&gt;&amp;#8288;&lt;/strong&gt;Joiner&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td1"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td1')"&gt;&amp;&lt;span&gt;#8288;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td1m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td1m')"&gt;&amp;&lt;span&gt;NoBreak;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td1u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td1u')"&gt;\u2060&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Запрещает разрыв строки, не добавляя пустого пространства. Не пробел, но для поиска, парсинга, сортировки и пр. определяет границы слов&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td colspan="3"&gt;&lt;p&gt;&lt;b&gt;Классика&lt;/b&gt;&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st3')"&gt;Hair&lt;strong id="st3"&gt;&amp;#8202;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td3"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td3')"&gt;&amp;&lt;span&gt;#8202;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td3m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td3m')"&gt;&amp;&lt;span&gt;hairsp;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td3u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td3u')"&gt;\u200A&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Пробел минимальной ширины&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st4')"&gt;Thin&lt;strong id="st4"&gt;&amp;#8201;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td4"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td4')"&gt;&amp;&lt;span&gt;#8201;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td4m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td5m')"&gt;&amp;&lt;span&gt;thinsp;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td4u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td4u')"&gt;\u2009&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Обычно в 1/5 кегля, реже — в 1/6&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;p&gt;→&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st5')"&gt;Narrow No-break&lt;strong id="st5"&gt;&amp;#8239;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;td id="td5"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td5')"&gt;&amp;&lt;span&gt;#8239;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td id="td5u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td5u')"&gt;\u202F&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Зауженный, часто схож с «Thin Space». Не отображается в Сафари, поэтому &lt;a href="https://stackoverflow.com/questions/595365/how-to-render-narrow-non-breaking-spaces-in-html-for-windows"&gt;выкручиваются&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st6')"&gt;Normal&lt;strong id="st6"&gt;&amp;#32;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td6"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td6')"&gt;&amp;&lt;span&gt;#32;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td id="td6u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td6u')"&gt;\u0020&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Обычный пробел, вводится клавишей «Space»&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;p&gt;→&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st7')"&gt;No-break&lt;strong id="st7"&gt;&amp;#160;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td7"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td7')"&gt;&amp;&lt;span&gt;#160;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td7m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td7m')"&gt;&amp;&lt;span&gt;nbsp;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td7u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td7u')"&gt;\u00A0&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Шириной с обычный пробел&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td colspan="3"&gt;&lt;p&gt;&lt;b&gt;Кратные кеглю&lt;/b&gt;&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st8')"&gt;Six-per-em&lt;strong id="st8"&gt;&amp;#8198;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td8"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td8')"&gt;&amp;&lt;span&gt;#8198;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td id="td8u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td8u')"&gt;\u2006&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;1/6 кегля&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st9)"&gt;Four-per-em&lt;strong id="st9"&gt;&amp;#8197;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td9"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td9')"&gt;&amp;&lt;span&gt;#8197;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td9m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td9m')"&gt;&amp;&lt;span&gt;emsp14;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td9u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td9u')"&gt;\u2005&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;1/4 кегля&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st10')"&gt;Three-per-em&lt;strong id="st10"&gt;&amp;#8196;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td10"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td10')"&gt;&amp;&lt;span&gt;#8196;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td10m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td10m')"&gt;&amp;&lt;span&gt;emsp13;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td10u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td10u')"&gt;\u2004&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;1/3 кегля. Ближе других к обычному пробелу&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st11')"&gt;En&lt;strong id="st11"&gt;&amp;#8194;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td11"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td11')"&gt;&amp;&lt;span&gt;#8194;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td11m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td11m')"&gt;&amp;&lt;span&gt;ensp;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td11u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td11u')"&gt;\u2002&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;1/2 кегля&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st12')"&gt;Em&lt;strong id="st12"&gt;&amp;#8195;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td12"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td12')"&gt;&amp;&lt;span&gt;#8195;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td12m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td12m')"&gt;&amp;&lt;span&gt;emsp;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td12u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td12u')"&gt;\u2003&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Шириной с кегль шрифта&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td colspan="3"&gt;&lt;p&gt;&lt;b&gt;К цифрам&lt;/b&gt;&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st13')"&gt;Medium Mathematical&lt;strong id="st13"&gt;&amp;#8287;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td13"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td13')"&gt;&amp;&lt;span&gt;#8287;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td13m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td13m')"&gt;&amp;&lt;span&gt;MediumSpace;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td13u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td13u')"&gt;\u205F&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;4/18 кегля. Применяют в математических формулах&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;p&gt;→&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st14')"&gt;Figure&lt;strong id="st14"&gt;&amp;#8199;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td14"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td14')"&gt;&amp;&lt;span&gt;#8199;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td14m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td14m')"&gt;&amp;&lt;span&gt;numsp;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td14u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td14u')"&gt;\u2007&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Шириной с цифру. Используют в наборе таблиц&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td colspan="3"&gt;&lt;p&gt;&lt;b&gt;Экзотика&lt;/b&gt;&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st15')"&gt;Punctuation&lt;strong id="st15"&gt;&amp;#8200;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td15"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td15')"&gt;&amp;&lt;span&gt;#8200;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td15m"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td15m')"&gt;&amp;&lt;span&gt;puncsp;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td15u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td15u')"&gt;\u2008&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Шириной с точку&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#st16')"&gt;Ideographic&lt;strong id="st16"&gt;&amp;#12288;&lt;/strong&gt;Space&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td id="td16"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td16')"&gt;&amp;&lt;span&gt;#12288;&lt;/span&gt;&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td id="td16u"&gt;&lt;p&gt;&lt;button class="copy" onclick="copyToClipboard('#td16u')"&gt;\u3000&lt;/button&gt;&lt;/p&gt;
&lt;/td&gt;&lt;td&gt;&lt;p&gt;Шириной с иероглиф. Используется в восточных языках&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;</description>
</item>

<item>
<title>Символы нулевой ширины</title>
<guid isPermaLink="false">632</guid>
<link>https://www.kirillbelyaev.com/ru/blog/?go=all/zero-width-characters/</link>
<pubDate>Thu, 19 Apr 2018 12:00:00 +0300</pubDate>
<author>Кирилл Беляев</author>
<comments>https://www.kirillbelyaev.com/ru/blog/?go=all/zero-width-characters/</comments>
<description>
&lt;p&gt;Чтобы контролировать внешний вид и поведение текста, обычного пробела не хватает. Например, отделяю пробелом в шестую часть кегля единицы измерения от значений. Или склеиваю предлоги с последующими словами. С &lt;a href="https://ilyabirman.ru/projects/typography-layout/"&gt;раскладкой Бирмана&lt;/a&gt; неразрывный пробел вводить легко, но с пробелами, меньше обычного, она не помогает. Поэтому копировал их со страницы &lt;a href="http://prgssr.ru/development/vse-o-probelah.html" class="nu"&gt;«&lt;u&gt;Все о пробелах&lt;/u&gt;»&lt;/a&gt;. Там вконце — таблица. Но всего нужного там нет. Из символов нулевой ширины есть только третий:&lt;/p&gt;
&lt;div class="e2-text-table"&gt;
&lt;table cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;&lt;/td&gt;
&lt;td&gt;Название&lt;/td&gt;
&lt;td&gt;Юникод&lt;/td&gt;
&lt;td&gt;ХТМЛ&lt;/td&gt;
&lt;td&gt;Мнемоника&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;Zero Width No-break﻿ Space&lt;/td&gt;
&lt;td&gt;U+FEFF&lt;/td&gt;
&lt;td&gt;&amp;&lt;span&gt;#65279;&lt;/span&gt;&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;&lt;a href="https://en.wikipedia.org/wiki/Word_joiner"&gt;Word Joiner&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;U+2060&lt;/td&gt;
&lt;td&gt;&amp;&lt;span&gt;#8288;&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&amp;&lt;span&gt;NoBreak;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;&lt;a href="https://en.wikipedia.org/wiki/Zero-width_space"&gt;Zero Width ​Space&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;U+200B&lt;/td&gt;
&lt;td&gt;&amp;&lt;span&gt;#8203;&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&amp;&lt;span&gt;NegativeMediumSpace;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;td&gt;&lt;a href="https://en.wikipedia.org/wiki/Zero-width_joiner"&gt;Zero Width Joiner&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;U+200D&lt;/td&gt;
&lt;td&gt;&amp;&lt;span&gt;#8205;&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&amp;&lt;span&gt;zwj;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;5&lt;/td&gt;
&lt;td&gt;&lt;a href="https://en.wikipedia.org/wiki/Zero-width_non-joiner"&gt;Zero Width Non-joiner&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;U+200C&lt;/td&gt;
&lt;td&gt;&amp;&lt;span&gt;#8204;&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&amp;&lt;span&gt;zwnj;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;Не все эти символы — пробелы. Работают они похожим образом, поэтому их можно перепутать.&lt;/p&gt;
&lt;p&gt;В свежем стандарте Юникода (3.2) «Word Joiner» заменил «Zero Width No-break Space», и о последнем можно забыть, несмотря на стройность названия. «Word Joiner» — непробел, но как и пробел определяет границы слов. Это влияет на поиск, парсинг, сортировку и прочее. Символ подходит для склейки конструкций вроде «км/ч» (км&lt;span style="color: orange"&gt;&amp;&lt;span&gt;NoBreak;&lt;/span&gt;&lt;/span&gt;/&lt;span style="color: orange"&gt;&amp;&lt;span&gt;NoBreak;&lt;/span&gt;&lt;/span&gt;ч).&lt;/p&gt;
&lt;p&gt;«Zero Width ​Space» похож на «Word Joiner», но не склеивает слова и растягиваться при выключке по ширине, как прочие пробелы.&lt;/p&gt;
&lt;p&gt;Управление внутри слова поручают «Zero Width Non-joiner» и «Zero Width Joiner». Например, чтобы отменить или задать лигатуру (конечно, при наличии нужных символов в шрифте). Эти символы используют в арабской, индийской, тайской, корейской и прочих письменностях без пробелов.&lt;/p&gt;
</description>
</item>


</channel>
</rss>