{ "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:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags\/css\/", "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Fcss%2Fjson%2F", "icon": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101", "author": { "name": "Кирилл Беляев", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/", "avatar": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101" }, "items": [ { "id": "672", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/align-rectangle-side-values\/", "title": "Выравнивание подписей с длинами сторон прямоугольника", "content_html": "

Заметка о вёрстке специфичного блока в вебе. Большинству такое не пригодится. Пишу, потому что надеюсь показать пользу от применения свойств по назначению.<\/p>\n

Верстали блочок с габаритами основания. Будь текст статичен, хватило бы СВГ. Но в английской версии мы помним об американцах и дублируем размеры в футах (и отбиваем дробную часть точкой):<\/p>\n

\n\"\"\n<\/div>\n

В СВГ всё задаётся строго по координатам, хорошо масштабируется, но не умеет «адаптироваться» под содержание. Поэтому c СВГ не обойтись без двух шаблонов и надежды, что они выдержат подписи любой длины. Можно усилить СВГ скриптом, но для меня это выглядело суперлишним. Казалось, что справятся ХТМЛ с ЦССом.<\/p>\n

Исходный ХТМЛ простейший:<\/p>\n

<div>\r\n    <span>22 м<\/span>\r\n    <div><\/div>\r\n    <span>14 м<\/span>\r\n<\/div><\/code><\/pre>
Первое, что решал: как выравнивать подписи по центру стороны. Понятно, что для верхней подписи нужен «text-align: center», но как ограничить длину подписи, чтобы она равнялась длине прямоугольника, а не всего родительского дива? Можно дублировать width для прямоугольника и подписи, но это не DRY<\/a> и неудобно в поддержке. Выручило свойство box-sizing<\/a>, которое говорит, как считать ширину и высоту элемента. Добавил родительскому диву «box-sizing: content-box» — указанные размеры элементы не будут включать падинги и обводки.<\/p>\n
.rectangle {\r\n    position: relative;\r\n    box-sizing: content-box;\r\n    padding-top: отступ, подходящий под высоту подписи; \r\n}<\/code><\/pre>
Теперь можно наследовать длину родителя и позиционировать подписи вне его:<\/p>\n
.rectangle-width, .rectangle-height {\r\n    display: inline-block;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n}\r\n\r\n.rectangle-width {\r\n    width: inherit;\r\n    top: 0;\r\n    text-align: center;\r\n}<\/code><\/pre>
Если текст длиннее отведённой длины, то он начинается от левого края и благодаря «white-space: nowrap» не переносится.<\/p>\n
.rectangle-height {\r\n    left: calc(100% + отступ от фигуры);\r\n    top: 60%;\r\n    transform: translateY(-40%);\r\n}<\/code><\/pre>
Transform и top и выравнивают подпись и фигуру по горизонтали. Если родитель без падинга,  сработает «top: 50%; transform: translateY(-50%)». В моём случае разницу в 20% нашёл на глаз.<\/p>\n
В конце разбираюсь с прямоугольником. Ширину и высоту он наследует у родителя, а ровно поместиться в отведённые границы помогает свойство «box-sizing: border-box», которое, наоборот, включает падинги и обводку.<\/p>\n
.rectangle-figure {\r\n    display: inline-block;\r\n    box-sizing: border-box;\r\n    width: inherit;\r\n    height: inherit;\r\n    border: 1px solid цвет;\r\n}<\/code><\/pre>
Итоговый ХТМЛ английской версии (без оформления футов):<\/p>\n
<div class="rectangle" style="width: длина; height: высота">\r\n    <span class="rectangle-width">22 m 72.2 ft<\/span>\r\n    <div class="rectangle-figure"><\/div>\r\n    <span class="rectangle-height">14 m<br>45.9 ft<\/span>\r\n<\/div><\/code><\/pre>
\n\"\"\n<\/div>\n
Кроме редактирования текста, код требует один раз задать размеры прямоугольника инлайн.<\/p>\n",
            "date_published": "2018-09-10T13:42:22+03:00",
            "date_modified": "2018-09-10T13:41:44+03:00",
            "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides@2x.png",
            "_date_published_rfc2822": "Mon, 10 Sep 2018 13:42:22 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "672",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides-layout@2x.png"
                ]
            }
        },
        {
            "id": "484",
            "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/webkit-font-smoothing\/",
            "title": "Сглаживание шрифтов",
            "content_html": "
Оказалось не все матёрые разработчики знают о ЦСС-свойстве «-webkit-font-smoothing», которое сглаживает шрифты. Есть ещё разные хаки, но тут просто свойство с тремя значениями:<\/p>\n
\r\nnone<\/b>
«...вопреки общепринятому мнению не теоретизирование — это действие, тогда как теоретизирование может соответствовать отсутствию осознанной деятельности, быть „выбором по умолчанию“.<\/p>\n
\r\nsubpixel-antialiased<\/b>
Непросто изучать (и запоминать) факты, воздерживаясь от суждений и отметая всяческие объяснения.<\/p>\n
\r\nantialiased<\/b>
Тяга к теоретизированию с трудом поддается контролю: она, подобно анатомическим характеристикам, входит в наше биологическое устройство, и борьба с ней — это борьба с самим собой.»<\/p>\n
Значение «none» бесполезно, а «subpixel-antialiased» и «antialiased» одинаково хороши, но подходят для разных случаев. Для Гельветики лучше «antialiased», а для Гарамона, который на сайте лаборатории<\/a> — «subpixel-antialiased».<\/p>\n
Добавлено позже<\/b>: на Андройде и Виндоус свойство не работает. В других случаях будет так:<\/p>\n
\n\"\"\n<\/div>\n",
            "date_published": "2016-12-01T20:25:26+03:00",
            "date_modified": "2016-12-02T23:37:30+03:00",
            "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/webkit-font-smoothing.png",
            "_date_published_rfc2822": "Thu, 01 Dec 2016 20:25:26 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/webkit-font-smoothing\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/webkit-font-smoothing.png"
                ]
            }
        }
    ],
    "_e2_version": 3572,
    "_e2_ua_string": "E2 (v3572; Aegea)"
}