将文字包装在不规则形状内 [英] Wrapping text inside irregular shapes

问题描述

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

我正在尝试为一个朋友站点构建一个模块，该模块处理珠宝雕刻.该模块需要能够实时预览客户他们在产品上的文字.

由于珠宝有不同的形状和大小，我需要一种将输入的文本包装到不同的自定义形状中的方法，如下图所示.

我已经用JavaScript编写了一个可以在大多数情况下工作的原型，但是它的边​​缘相当粗糙，我希望能有一种经过更多尝试和测试的方法来实现此目的./p>

我需要使此工作在尽可能多的浏览器上进行. 任何帮助将不胜感激！

解决方案

基本上不需要CSS，就可以通过使用CSS 浏览器对shape-outside 的支持就是也可以.但是您可以使用相应的供应商前缀(例如-webkit-shape-outside). 现在已很好地支持SVG .

工作示例

 .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> 

I was wondering if there is a library that anyone is aware of that can handle wrapping text inside custom shapes?

I'm attempting to build a module for a friends site that deals with engraving on jewellery. This module would need to be able to preview to the customer in real time what their text would look like on the product.

As the Jewellery comes in different shapes and sizes, I need a way to wrap the entered text to inside different custom shapes like in the image below.

I've already coded a prototype in JavaScript that works for the most part, but its pretty rough around the edges and I was hoping for a more tried and tested way to do this instead.

I need to make this work on as many browsers as possible. Any help would be appreciated!

解决方案

It is possible to achieve this effect without JavaScript, basically by using the CSS shape-outside property, as already mentioned in the comments.

How it works

The important elements are displayed in the following image (a screenshot of my web inspector):

You create a .wrapper element that contains an SVG element, two shape elements and a text paragraph. According to your shape, you can position your SVG element absolute and give it a lower z-index than your text paragraph.

The text wrapping itself is possible due to the shape-outside property in combination with float. One possible solution is to create to elements, give them an outside shape that toughly matches the SVG shape and let them float to the left and to the right, such as the text is in between and wraps on both sides.

The Good about this approach is, that without any further calculation the text wraps according to the shape. You can even scale the wrapper element and due to percentage values, the shape will scale accordingly. The Bad is, that you would have to create a corresponding CSS shape for each of the products and you will have to handle the text, that doesn't fit into the shape (which could be easily solved with overflow: hidden;). Also even a year after this question was asked, the browser support for shape-outside isn't that well either. But you can use the corresponding vendor prefixes (e.g. -webkit-shape-outside). SVG is well supported now.

Working example

.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>

这篇关于将文字包装在不规则形状内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！