Как решить проблему с узкой шириной текста возле float элементов?

Question

[leeroyjenkins176]

Представьте - контент менеджер добавляет статью, в которой есть фото с float: left/right. Размер фото может быть любой. При определенной ширине контейнера возникнет ситуация, что сбоку от фото ширина текста будет в 1-2 слова, что смотрится плохо.
Я искал решение этой проблемы и нашел такой вариант https://css-tricks.com/minimum-paragraph-widths/. Но в нем есть два минуса: у следующего после фото элемента уже может быть свой псевдоэлемент; а также фото так и остается прижатым к краю. В идеале после переноса текста вниз его нужно центрировать.
У меня была идея сделать обертку вокруг фото и при определенных условиях применить ей ширину 100%, тем самым сдвинув текст вниз. При этот само фото можно отцентрировать с помощью text-align:center у обертки. Но как это сделать толкьо на css без js я так и не придумал. Была надежда на контейнерные запросы и какие-то современные свойства, но все без результатно.
Как вы решаете эту задачу?
Сразу скажу, что просто отменять float на определенных брейкпоинтах не вариант. Некоторые фото могут быть или очень маленькими, где это не нужно. Или очень большими, где даже без медиазапросов не должно быть обтекания. Вариант с js тоже не рассматриваю.

Comments

[sergski]

max-width для фото?

[Aetae]

Мог бы добавить код для экспериментов.

[leeroyjenkins176]

Aetae, https://codepen.io/coyibe2003/pen/ExBBdEQ

Answer 1

[Aetae]

Накидал такую хрень, с использованием трюка с распоркой и тюка с translate:
(потыкай в 0.5x\1x)
Работает только если ширина контейнера известна(здесь 100vw).

Но хз, на самом деле, наверное на js будет проще.:)

Comments

[leeroyjenkins176]

Объясните логику работы clamp в данном примере

img[style*="float: left"],
img[style*="float:left"]{
	transform: translateX(
		clamp(
			0px, 
			calc((100% + 200px - 100vw) * 100000), 
			calc((100vw - 100%) / 2)
		)
	);
}

[Aetae]

leeroyjenkins176, для float: left - минимально 0px, максимально - середина экрана, значение по центру clamp: (ширина картинки + минимальная ширина - ширина контейнера) * 100000.
Т.е. если <ширина картинки + минимальная ширина текста> больше чем <ширина контейнера> - то значение там 100000 * что-то плюсовое, а если меньше то 100000 * что-то минусовое.

clamp(0px, -100000, Npx) = 0px
clamp(0px, 100000, Npx) = Npx

Граничные случаи когда может сломаться:
a) экран шире 200000px.
b) разница между шириной контейнера и <ширина картинки + минимальная ширина текста> сильно меньше 1px(но не равно 0).
Оба случая кране маловероятны, хоть и возможны.:)

P.S. Я специально в переменные вынес, чтоб лучше читалось, чего и тебе рекомендую.:)

Answer 2

[Сергей delphinpro]

Как вы решаете эту задачу?

Вправляем мозги менеджеру-контентщику.

Если он видит, что картинка криво смотрится, то пусть будет любезен в редакторе админки выставить ей центрирование вместо обтекания.

Comments

[leeroyjenkins176]

Тут проблема в том, что условное фото с шириной 300px будет хорошо смотрется на десктопе. Но на мобильном/планшете float уже будет лишним. И это бы решалось медиазапросом, если бы фото всегда имело одну и ту же ширину. Но оно может быть и 200 и 500.

[Сергей delphinpro]

leeroyjenkins176, тогда javascript

[ProjectSoft]

leeroyjenkins176, а в чём проблема у контент-менеджера подготавливать фотографии, текст, ... перед размещением? Все вопросы ведь снимутся автоматом.
Также в CSS задать максимальный размер фото. Те же самые 300px.

У меня была идея сделать обертку вокруг фото и при определенных условиях применить ей ширину 100%, тем самым сдвинув текст вниз. При этот само фото можно отцентрировать с помощью text-align:center у обертки. Но как это сделать толкьо на css без js я так и не придумал. Была надежда на контейнерные запросы и какие-то современные свойства, но все без результатно.

Идея может жить. Но можно сделать и без всяких обёрток. Всё зависит от поставленных задач.
Контент-менеджер должен уметь ни только тупо копировать и вставлять, но он так же очень хорошо должен, да и просто обязан, знать html разметку и возможности используемого шаблона/ов сайта.

[Сергей delphinpro]

ProjectSoft, тут фотки по задумке могут быть разного размера. Но даже в этом случае можно подрихтовать редактор админки и озадачить менеджера. Добавить в свойства картинки возможность добавлять кастомные классы

img-centered, sm-img-centred, md-img-centered, lg-img-centered

.img-centered { display:block; margin:auto; }
@media (min-width: 567px) { .sm-img-centred { display:block; margin:auto; } }
@media (min-width: 768px) { .md-img-centered { display:block; margin:auto; } }
@media (min-width: 992px) { .lg-img-centered { display:block; margin:auto; } }

манагер вставляет картинку и ставит ей класс, чтобы она на нужном размере вставала по центру.

[leeroyjenkins176]

Сергей delphinpro, я не уточнял, но для фриланса этот вариант не жизнеспособен

[ProjectSoft]

Сергей delphinpro, я и не против и не спорю. Я об этом и говорю. Для этого существует множество редакторов с кучей API настроек. Тот же самый TinyMCE. Просто топикстартер не описывает используемые инструменты и используемую CMS. Ибо везде всё по разному ))))

[Сергей delphinpro]

leeroyjenkins176, каким боком здесь фриланс?

Answer 3

[Данила]

Можно попробовать использовать комбинацию float с псевдоклассом :has() для проверки ширины контейнера или текста, рядом с которым располагается изображение.

.container:has(.image) {
  display: block;
}

.container:has(.image:only-child) {
  text-align: center;
}

.container:has(.image) p {
  display: inline-block;
  min-width: 150px;
  width: calc(100% - 200px);
}

.image {
  float: left;
  max-width: 150px;
  margin: 0 10px 10px 0;
}

.container:has(.image) p:not(:only-child) {
  clear: both;
  display: block;
  text-align: center;
}