在具有CSS形状的弯曲图像周围包裹文本-CSDN博客

Several years ago I wrote an article showing how to wrap text to a curve using a combination of Adobe PhotoShop’s Slice tool and some CSS. While that technique still works today, the work of manually creating image slices means that it takes a significant amount of time to create the effect.

几年前，我写了一篇文章，展示了如何结合使用Adobe PhotoShop的Slice工具和一些CSS将文本包裹到曲线上。尽管该技术在今天仍然有效，但是手动创建图像切片的工作意味着创建效果需要大量时间。

Promoted by the Adobe web platform team, the CSS Shapes Module aims to create the same visual effects that have been available to desktop print designers for decades – including wrapping text around and within shapes on the page – available to the web. This means we can rapidly create magazine-quality layouts on web pages, with little PhotoShop trickiness required.

由Adobe Web平台团队推动， CSS Shapes Module的目的是创建与桌面印刷设计人员已经使用了数十年的视觉效果相同的视觉效果-包括将文字环绕在网页上的形状中或文字在Web上可用。这意味着我们可以在Web页面上快速创建杂志品质的版面，而几乎不需要PhotoShop的麻烦。

The Shapes spec is defined across two modules. At the head of each is a property: shape-inside and shape-outside. While there are many possible variations, this article will concentrate on what will likely become a very popular application of the latter property: using an alpha mask to wrap text around the shape of an image.

Shapes规范跨两个模块定义。每个属性的顶部都有一个属性： shape-inside和shape-outside 。尽管有很多可能的变体，但本文将集中讨论后一种属性的一种非常流行的应用：使用Alpha蒙版将文本环绕在图像的形状上。

生活在一个盒子里 (Living In A Box)

Up until now every image, no matter what visual information it contains, has been always treated as a box on a web page, forcing text to wrap around it in a rectangle.

到目前为止，每张图像，无论包含什么视觉信息，都一直被视为网页上的一个框，迫使文本以矩形环绕。

alt — Traditional floats are always around the rectangular borders of an image, irrespective of what bitmap information it may contain

Usually an alpha mask serves to make an image transparent against a background, but the CSS shapes spec can read the greyscale information from a mask to appropriately wrap text to the actual image, rather than the box that contains it.

通常，alpha蒙版用于使图像对背景透明，但是CSS形状规范可以从蒙版中读取灰度信息，以将文本适当地包装到实际图像中 ，而不是包含文本的框中。

追踪面具 (Tracing Masks)

At this stage I’m going to assume that you know how to make an alpha masked PNG image. If you’re unfamiliar with the process, I’d recommend reading one of my articles on the subject; you can also download the PSD, PNG and mask image to work along with this tutorial.

在此阶段，我将假设您知道如何制作Alpha遮罩的PNG图像。如果您不熟悉此过程，建议阅读其中一篇有关该主题的文章；您还可以下载PSD ， PNG和蒙版图像以与本教程一起使用。

The first step is to place the standard image inside HTML text just as you normally would. In this example, I’ve added sematic value by accessorizing the markup with a little microdata:

第一步是像平常一样将标准图像放置在HTML文本中。在此示例中，我通过为标记添加一些微数据来增加了语义价值：

<div itemscope itemtype="http://schema.org/Person">
	<h1 itemprop="name">Rita Hayworth</h1>
	<img src="rita-hayworth.png" alt class="wrap" property="image">
	<h2>Actress, dancer, comedienne:
		<span itemprop=birthDate content="1918-10-17">1918</span> –
		<span itemprop=deathDate content="1987-05-14">1987</span>
	</h2>
	<p>Born <span itemprop="additionalName">Margarita Carmen Cansino</span>. 
One of the original transformative actresses of Hollywood: changed her hair 
color eight times for eight different films, and her name twice. Appeared in 
61 features; one of only six women to dance with both Fred Astaire and 
Gene Kelly during their careers.
</div>

The image is floated: note that in the current implementation of the spec, the content to be wrapped must be floated and have its width and height declared for shape-outside to work.

图像是浮动的：请注意，在规范的当前实现中，要包装的内容必须浮动，并且声明其宽度和高度才能使shape-outside工作。

I’ll add a bit of style to the <div> and text, using the Gilda and Oxygen typefaces from Google Fonts:

我将使用Google字体的Gilda和Oxygen字体为<div>和文本添加一些样式：

div[itemscope] {
	font-family: Gilda Display, serif;
	background: #222;
	overflow: hidden;
	color: #fff;
	padding: .5rem;
	padding-right: 2rem;
} 
div[itemscope] h1 { 
	margin-bottom: .5rem;
	margin-top: 2rem; 
}
div[itemscope] p {
	font-family: Oxygen, sans-serif;
	line-height: 1.5;
	font-size: 1.4rem;
}
.wrap { 
	float: left;
	width: 50%;
	height: auto;
}

You might think that CSS Shapes would use an alpha mask built into the image for wrapping, but it doesn’t: rather, it references a separate specially-formatted image, and uses that as a guide. In principle, this makes CSS Shapes more adaptive: you can apply a wrapping shape to an image format that doesn’t directly support alpha masks (such as JPEGs), or make a wrapping guide that is completely unrelated to the bitmap content of the presented image.

您可能会认为CSS Shapes会使用图像中内置的Alpha遮罩进行包装，但实际上并非如此：而是引用一个单独的特殊格式的图像，并将其用作指南。原则上，这使CSS Shapes更具适应性：您可以将包装形状应用到不直接支持Alpha蒙版(例如JPEG)的图像格式，或者制作与所显示位图内容完全无关的包装指南图片。

In this case, I’ll use the mask that’s already part of the PNG image to create the guide. To make that happen, I’ll need to export the guide with a careful series of steps:

在这种情况下，我将使用已经是PNG图像一部分的蒙版来创建指南。为此，我需要通过一系列仔细的步骤来导出该指南：

alt — Adobe PhotoShop screenshot showing a layer selection and duplicated mask

Open the rita-hayworth.psd file in Adobe PhotoShop
在Adobe PhotoShop中打开rita-hayworth.psd文件
Turn off the visibility of the Rita Hayworth layer. Turn on the visibility of the Black Background layer immediately underneath it.
关闭Rita Hayworth图层的可见性。启用黑色背景层下面的可见性。
Hold down the Option / Alt key and drag the mask from the Rita Hayworth layer to the Black Background layer, duplicating the mask. (If you're asked if you want to replace the existing layer mask, say yes).
按住Option / Alt键，然后将遮罩从Rita Hayworth图层拖动到“ 黑色背景”图层，复制遮罩。 (如果询问您是否要替换现有的图层蒙版，请说是)。

The final mask image

最终的蒙版图像
The guide image has to be in Indexed color: choose Image / Mode / Indexed Color… from the menu bar. You’ll be asked if you want to merge visible layers and discard hidden layers. Click OK. In the window that appears, choose Exact palette, Forced black and white, transparency on and no Matte.
指南图像必须为索引颜色：从菜单栏中选择图像/模式/索引颜色… 。系统将询问您是否要合并可见层并丢弃隐藏层。单击确定 。在出现的窗口中，选择“精确调色板”，“强制黑白”，“透明”和“无遮罩”。
Choose File / Save for Web…
选择文件/保存为网站…
Save the image in PNG-8 format, ensuring that Transparency is on; ensure that the new image is saved in the same location as the original mage.
以PNG-8格式保存图像，确保打开了透明性；确保新图像与原始图像保存在相同的位置。

Now that we have our wrapping guide image, we can reference in our CSS:

现在我们有了包装指南图像，我们可以在CSS中进行引用：

.wrap {
	float: left;
	width: 50%;
	height: auto;
	shape-outside: url(rita-hayworth-mask.png');
	shape-margin: 2em;
}

Depending on the browser you’re using, you may find the result doesn’t do much. The CSS Shapes module is supported in Chrome 37+, Safari 8+ on mobile and desktop (behind a vendor prefix), and the latest version of the Android browser, but not Firefox or IE / Edge. However, all is not lost!

根据您使用的浏览器，您可能会发现结果并没有太大作用。 Chrome浏览器37+，移动和台式机上的Safari 8+(在供应商前缀之后 )以及最新版本的Android浏览器(而不是Firefox或IE / Edge)都支持CSS Shapes模块。但是，一切并没有丢失！

使用形状Polyfill (Using The Shapes Polyfill)

While the Shapes module is expected to be supported in all mainstream browsers very soon, we want the same effect applied across all of them now. To achieve that, we can use a polyfill: a piece of JavaScript that replicates the functionality of the CSS Shapes code in browsers that don’t yet support it. Getting the code is easy: go to the polyfill’s Github page, copy the code you find into an editor, and save it for yourself; alternatively, use the code I’ve linked here. Then, add it to the bottom of your page:

虽然Shapes模块有望很快在所有主流浏览器中得到支持，但我们现在希望在所有主流浏览器中都应用相同的效果。为此，我们可以使用polyfill：一段JavaScript，该JavaScript在尚不支持CSS Shapes代码的浏览器中复制其功能。获取代码很容易：进入polyfill的Github页面，将找到的代码复制到编辑器中，然后自己保存；或者，使用我在这里链接的代码。然后，将其添加到页面底部：

<script src="shapes-polyfill.min.js"></script>

This script queries the browser to see if it currently supports the CSS Shapes module; if it does not, the script replicates the behavior by applying a series of offset float to the text. Obviously, this will not perform as well as a native implementation; you’ll have to judge for yourself how this solution works on your site. Over time, fewer browsers will need the JavaScript solution as they come to support the Shapes module.

该脚本查询浏览器，以查看当前是否支持CSS Shapes模块。如果没有，则脚本通过将一系列偏移量float应用于文本来复制行为。显然，这将无法实现本机实现。您必须自己判断该解决方案在您网站上的运作方式。随着时间的流逝，越来越少的浏览器将需要JavaScript解决方案来支持Shapes模块。

结论 (Conclusion)

There are many more possibilities in CSS Shapes, which I will explore in future articles; if you’re especially eager, Sara Souedian has an excellent article on the topic.

CSS Shapes还有很多可能性，我将在以后的文章中进行探讨。如果您特别渴望， Sara Souedian会提供有关该主题的出色文章。