在不规则形状中包裹文字

时间:2017-05-24 21:30:09

标签: javascript css css3 svg css-shapes

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

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

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

Example

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

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

1 个答案:

答案 0 :(得分:1)

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

如何运作

重要元素显示在下图中(我的网络检查员的屏幕截图):

enter image description here

您创建一个.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>