在不规则形状中包裹文字

Question

我想知道是否有人知道可以处理在自定义形状中包装文本的库？

我试图为朋友网站建立一个模块，用于处理珠宝雕刻。该模块需要能够实时预览客户他们的文本在产品上的样子。

由于首饰有不同的形状和大小，我需要一种方法将输入的文字包裹在不同的自定义形状内，如下图所示。

我已经用JavaScript编写了一个原型大部分工作原型，但它的边缘非常粗糙，我希望有更多经过试验和测试的方法来代替

我需要在尽可能多的浏览器上完成这项工作。 任何帮助将不胜感激！

Answer 1

可以在没有JavaScript的情况下实现此效果，基本上通过使用CSS shape-outside属性，如评论中已经提到的那样。

如何运作

重要元素显示在下图中（我的网络检查员的屏幕截图）：

您创建一个.wrapper元素，其中包含一个SVG元素，两个形状元素和一个文本段落。根据您的形状，您可以将SVG元素置于绝对位置，并使其比文本段落低z-index。

由于shape-outside属性与float相结合，文本换行本身是可能的。一种可能的解决方案是创建元素，给它们一个与SVG形状非常匹配的外部形状，让它们向左和向右浮动，例如文本介于两者之间并包裹在两侧。

关于这种方法的 Good 是，没有任何进一步的计算，文本会根据形状进行包装。您甚至可以缩放包装元素，并且由于百分比值，形状将相应地缩放。 错误是，您必须为每个产品创建相应的CSS形状，并且您必须处理不适合形状的文本（可以使用overflow: hidden;）。甚至在提出这个问题一年之后，browser support for shape-outside也不是那么好。但您可以使用相应的供应商前缀（例如-webkit-shape-outside）。 SVG is well supported现在。

工作示例

.wrapper {
  position: relative;
  width: 400px;
  height: 300px;
  padding-top: 50px;
}

.background {
  position: absolute;
  z-index: 0;
  top: -65px;
  left: 28px;
  transform: rotate(-45deg);
  width: 90%;
}

p {
  position: relative;
  z-index: 1;
  text-align: justify;
  font-size: 1.6em;
  font-family: Helvetica, Arial;
  margin: 0;
}

.shape {
  width: 50%;
  height: 100%;
}

.left {
  shape-outside: polygon(0 0, 0 100%, 100% 100%, 100% 95%, 20% 40%, 10% 20%, 20% 0);
  float: left;
}

.right {
  shape-outside: polygon(100% 0, 100% 100%, 0 100%, 0 95%, 80% 40%, 90% 20%, 80% 0);
  float: right;
}

<div class="wrapper">
  <svg class="background" viewbox="-1 -1 95 95">
    <path d="M60,30 a30,30 0 0,1 0,60 L0,90 0,30 a30,30 0 0,1 60,0z" fill="#daeef3" stroke="black" stroke-width="2" />
  </svg>
  <div class="shape left"></div>
  <div class="shape right"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperi ores. Lorem ipsum dolor sit am</p>
</div>