Блог

На HTML-странице вы можете заставить текст обтекать изображения с помощью CSS-свойства «float». Но при этом будет учитываться только прямоугольник изображения, а не прозрачные области изображения. Теперь у меня есть изображение с большими областями полной прозрачности, как, например, круглый логотип, и я хотел бы, чтобы текст обтекал контур круга этого логотипа, а не ограничивающий прямоугольник. По крайней мере, на стороне изображения, обращенной к тексту.

Я знаю, что CSS, вероятно, не подходит для этой задачи. Но есть ли какой-нибудь обходной путь, например, скрытые разделы или что-то, что может достичь того же (или подобного) эффекта? Кто-нибудь уже видел такую вещь?

Сейчас я написал для этого функцию PHP. Он берет изображение PNG и генерирует элементы <div>, чтобы текст обтекал форму, отличную от прямоугольника изображения. Вы можете найти код здесь:

https://unclassified.software/source/shaped-image-flow

Обновление 2020/2021:

Теперь для этого есть свойство CSS: shape-outside. Можно придать изображению прозрачность, которая будет определять внешнюю форму, позволяющую тексту обтекать. Если видимое изображение уже является PNG, то это же изображение можно использовать для этого свойства CSS. Дополнительное поле может быть добавлено с помощью shape-margin. Оба поддерживаются чем угодно, кроме IE.

Пример:

 <img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
  

Я действительно сомневаюсь, что вы можете сделать это легко, не создавая большой путаницы с тегами, JavaScript или обоими. Один из способов, который я могу придумать, — это поместить изображение в zindex большего размера и расположить div или divs позади него, и текст будет обтекать их. Проще всего было бы использовать прямоугольник меньшего размера, который исключает прозрачные области. Но тогда почему бы просто не обрезать / обрезать изображение? Или вы можете попробовать плавающие значения высоты строки за ним, но я предполагаю, что это довольно быстро станет довольно уродливым. Или вы могли бы попробовать поместить каждую строку текста в span / div и расположить их вручную или с помощью js, вычисляя приблизительные формы к тем, которые есть на изображении. Еще одна идея, в которой я не уверен: возможно, это можно сделать с помощью svg. Но быстрый поиск не показывает многообещающего эфира.

В любом случае, еще одна вещь, которую следует учитывать, когда вы делаете что-то столь экспериментальное и сложное, как это, каким бы способом вы это ни делали, скорее всего, будет очень сложно заставить его хорошо работать в большинстве браузеров.

Есть свойство css, которое делает именно то, что вы хотите, shape-outside включает значения фигур, которые вы можете использовать.

https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/