- \n
- Фейсбук<\/a>,<\/li>\n
- Твитер<\/a>,<\/li>\n
- Линкедин<\/a>.<\/li>\n<\/ul>\n
Телеграм<\/h2>\n
- \n
- Бот, который чистит кэш<\/a>.<\/li>\n<\/ul>\n
- \n
- Первой строчкой в превью управляет метатег og:site_name<\/b>. Если он идентичен og:title<\/b>, останется только одна строка жирным.<\/li>\n<\/ul>\n
- \n
- Для большой картинки, неожиданно нужен метатег Твитера (а не Open Graph, как для всего остального):<\/li>\n<\/ul>\n
<meta name="twitter:card" content="summary_large_image"><\/code><\/pre>", "date_published": "2021-03-27T19:41:57+03:00", "date_modified": "2021-03-27T21:33:37+03:00", "_date_published_rfc2822": "Sat, 27 Mar 2021 19:41:57 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "754", "_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" ], "og_images": [] } }, { "id": "672", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/align-rectangle-side-values\/", "title": "Выравнивание подписей с длинами сторон прямоугольника", "content_html": "Заметка о вёрстке специфичного блока в вебе. Большинству такое не пригодится. Пишу, потому что надеюсь показать пользу от применения свойств по назначению.<\/p>\n
Верстали блочок с габаритами основания. Будь текст статичен, хватило бы СВГ. Но в английской версии мы помним об американцах и дублируем размеры в футах (и отбиваем дробную часть точкой):<\/p>\n
\n![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides@2x.png\")
\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![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides-layout@2x.png\")
\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" ] } } ], "_e2_version": 3572, "_e2_ua_string": "E2 (v3572; Aegea)" }
- Для большой картинки, неожиданно нужен метатег Твитера (а не Open Graph, как для всего остального):<\/li>\n<\/ul>\n
- Первой строчкой в превью управляет метатег og:site_name<\/b>. Если он идентичен og:title<\/b>, останется только одна строка жирным.<\/li>\n<\/ul>\n
- Твитер<\/a>,<\/li>\n