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