I want to wrap dynamic text from a field in the data around an image similar to discussed here
I don’t seem to be able to get it to all come together though, would somebody be able to advise on the best way to do it
Not an easy task but you should be able to achieve this using SVG (perhaps take Adobe Illustrator as your starting point). The following draws a path using SVG, this you can put in the source of your section. I’ve wrapped the placeholder with a “tspan” element and assigned it a class name. This way you will be able to ‘select’ it using a standard user script.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 325 300" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">.thepath{fill:none;} </style>
<path id="curve" class="thepath" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91"></path>
<text text-anchor="middle" x="25">
<textpath startOffset="50%" xlink:href="#curve">
Lorem ipsum dolor
<tspan class="name">@name@</tspan> consectetur adipiscing elit.
</textpath>
</text>
</svg>
I ran a quick output test and things seem to work.
Hope this is of some help,
Erik
Hi @ChrisG ,
Unfortunately, you can’t create a curved text element without making use of a complex script. However, it is possible to solve your question by using the SVG method which @Erik shared.
The following script will wrap the text, which has been added to a Positioned Box element, around a circle. This circle will be created based on the height, weight, and font-size values of the Positioned Box element.
Note
The width and height values should be equal otherwise you won’t get a good looking result.
Note
Make sure that the CSS property “font-size” has been added to the Positioned Box element and that it’s value ends with “px” (pixels).
With this script you can add multiple placeholders to the Positioned Box element “example-container” and you can change the width and height of the Positioned Box element. Both changes can be done in the Source or Debug mode of the Connect Designer.
Source code Positioned Box element:
<div id="example-container" anchor="page_media_0"
style="font-size: 12pt; position: absolute; overflow: hidden; box-sizing: border-box; width: 200px; height: 200px; top: 78.30000000000001px; left: 29.2667px;" offset-x="85.96670076293945" offset-y="135.00000076293946">
Placeholder text: <span class="placeholder ol-scripted">@placeholder@</span>
</div>
Standard Script
Name: Curved Text
Selector: #example-container
JavaScript code:
var result = "",
width = results.width(),
height = results.height(),
text = results.text().trim(),
fontSize = 0;
if (results.css("font-size").split("px").length > 0) {
fontSize = results.css("font-size").split("px")[0];
}
result = createCurvedText(width, height, fontSize, text);
results.html(result);
function createCurvedText(width, height, fontSize, text) {
var htmlString = "";
var textBox = {result: "", width: 0};
// Add a temporary element to the Positioned Box to get the width of it's textual content
textBox.result += "<div id=\"temp-10731370\" style=\"left: 0px; position: absolute; top: 0px; white-space: nowrap;\">";
textBox.result += text;
textBox.result += "</div>";
results.html(textBox.result);
if (query("#temp-10731370").length > 0) {
textBox.width = query("#temp-10731370").width();
}
// Calculate circle
var diameter = (width - (fontSize * 2));
var radius = (diameter / 2);
var circumference = (diameter * Math.PI);
if ((textBox.width < circumference) && (width == height)) {
var percentage = ((textBox.width / circumference) * 100);
var degrees = (360 / 100 * percentage);
var rotate = 0;
if (degrees > 180) {
rotate = ("-" + (parseInt(degrees - 180) / 2).toString());
} else if (degrees < 180) {
rotate = parseInt((180 - degrees) / 2);
}
htmlString += "<svg style=\"transform: rotate(" + rotate + "deg);\" viewBox=\"0 0 " + width + " " + height + "\" xmlns=\"http://www.w3.org/2000/svg\">";
htmlString += "<style>#example-circle{fill:red;}</style>";
htmlString += createPath((width / 2), (height / 2), radius);
htmlString += "<text>";
htmlString += "<textpath xlink:href=\"#example-circle\">";
htmlString += text;
htmlString += "</textpath>";
htmlString += "</text>";
htmlString += "</svg>";
} else if (width != height) {
logger.error("Standard Script \"Curved Text\" - Make sure that the \"width\" and \"height\" values are equal.");
}
return htmlString;
}
function createPath(centerX, centerY, radius) {
var path = "";
path += "<path id=\"example-circle\" d=\"";
path += ("M " + centerX + " " + centerY + " ");
path += ("m -" + radius + ", 0 ");
path += ("a " + radius + ", " + radius + " 0 1, 1 " + (radius * 2) + ", 0 ");
path += ("a " + radius + ", " + radius + " 0 1, 1 -" + (radius * 2) + ", 0 z");
path += "\"/>";
return path;
}
Important: Please remember that this script is just an example. You still have to test it by your own because I wasn’t able to test the example completely.