Фронтендерское сообщество, я вызываю тебя, Такой странный кейс. Есть блок с

Question

Фронтендерское сообщество, я вызываю тебя, Такой странный кейс. Есть блок с

текстом в несколько строк внутри дива с дисплей флекс. Блок искривлен через transform: skewY(-15deg). Из-за того, что текста много, то блок сначала пытается занять всю ширину своего контейнера, а потом уже переносит текст. Таким образом - блок на всю ширину родителя, а текст - как поместится. Так же блок с текстом центрируется по вертикали за счет align-items: center и по горизонтали через justify-content: center у родителя. И если смотреть по границам именно блока - то центрируется верно (картинка 1), но если смотреть по границам текста - само собой текст смещен относительно центра по вертикали (картинка 2), на третьей картинке убрал серый фон чтобы было наглядней в чем проблема (финальная версия должна быть без фона).
Насколько я знаю, это совершенно обычное поведение текста в браузере, и я бы не стал над этим заморачиваться, но клиент просит попробовать пофиксить. И вот я думаю, какие есть идеи?

#programming #russian #vue.js

0

30.05.2022

16 ответов

4 просмотра

Сергей Дёмин

тут даже через жопу если делать, не получится

0

30.05.2022

Pavel Arsieiev Автор вопроса

Сергей Дёмин
ты можешь размер текста привязать к vmin vmax

не могу...это вы скорее про адаптивность текста...а мне про выровнять текст не по границам блока, а по границам текста, при том, что границы блока вообще-то правильно отображаются)

0

30.05.2022

Pavel Arsieiev Автор вопроса

Сергей Дёмин
тут даже через жопу если делать, не получится

вот я уже все ближе к этому же ответу :) Подумал, может тут есть кто-то достаточно хитрый, чтобы выдать мне костыль какой-нибудь :)

0

30.05.2022

Сергей Дёмин

Pavel Arsieiev
вот я уже все ближе к этому же ответу :) Подумал, ...

установи размер текста в em (наследуются от родителя) родителю установи размер текста в пикселях который уже будешь как-то высчитывать

0

30.05.2022

Сергей Дёмин

Сергей Дёмин
установи размер текста в em (наследуются от родите...

но без моноширного шрифта это будет сложно

0

30.05.2022

Pavel Arsieiev Автор вопроса

Сергей Дёмин
установи размер текста в em (наследуются от родите...

и как это поменяет процесс рендера текста? :)

0

30.05.2022

Pavel Arsieiev Автор вопроса

Сергей Дёмин
но без моноширного шрифта это будет сложно

мне нужно не подогнать текст под размеры контейнера, мне нужно уменьшить размер блока с текстом непосредственно до размеров текста, который оный имеет в своем естественном состоянии)) в этом и сложность :)

0

30.05.2022

Сергей Дёмин

Pavel Arsieiev
мне нужно не подогнать текст под размеры контейнер...

попробуй текст указать в СВГ и его расстянуть как картинку

0

30.05.2022

Pavel Arsieiev Автор вопроса

Сергей Дёмин
попробуй текст указать в СВГ и его расстянуть как ...

в свг текст не будет переноситься построчно, он будет скейлиться, чтобы влезть в то количество строк, которое в разметке было изначально)

0

30.05.2022