CODEWITHSUNDEEP
javascriptcsssvgcss-shapes
ColaCube
ColaCube

Reputation: 71

Wrapping text inside irregular shapes

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.

Example

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!

Upvotes: 2

Views: 2380

Answers (1)

andreas
andreas

Reputation: 16936

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):

enter image description here

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>

Upvotes: 5

Related Questions