Creating a Word Art text-curving design picker in only 30 lines of pure HTML web component code + 1 extra file (no node or JS!)

Hey all -- as I'm back to Modulo.js tutorial writing, I am always looking for more content ideas. Have an idea? Be sure to let me know in the comments!

Previously, I showed how to use the -store= processor to make a reactive shared State store between components, a deep dive into Modulo's Markdown-HTML file format, or, last week, how to make a circular text-art tool. Today, let's make another SVG text design tool, except using <path> instead of <circle>. While slightly more complex, using <path> elements for Text allows for fun and arbitrary text arrangements -- and, most importantly, is supported by Chrome!

The final result

Try it out now, in less than 30 seconds: 🚀🚀🚀 Want to skip ahead? Scroll to the end and copy the ~30 lines of HTML code into any local HTML file, and then open it in your browser. Modulo has no dependencies and even runs embedded in local HTML files, so it's really that easy!

---

Starting with SVG and text input

Let's add an SVG along with a text input, bound to the text. Let's use a <Template> and a <State> component parts, as follows:

<Template>
  <section>
    <p><input [state.bind] name="text" title="Text" maxlength="15" /></p>
  </section>
  <svg viewBox="0 0 200 100" style="width: 55%; margin-top: 100px">
      <path id="curve" fill="transparent" d="M 10,50 C 20,40 40,10 60,40 80,70 100,65 120,90" />
      <text><textPath href="#curve">{{ state.text }}</textPath></text>
  </svg>
</Template>
<State
    text="Modulo Text FX!"
></State>

In this snippet, we have a <input> element that's bound to State using [state.bind]. If the State concept is giving you conceptual trouble, consider warming up with this tutorial on creating a font design tool, or the the corresponding section in the interactive Modulo tutorial. If SVG <textPath> elements are confusing you, check out MDN's documentation. After that, we have an <svg> element, containing <path> and <textPath> elements. These are linked together with id="curve", and href="#curve" respectively. The {{ state.text }} links the state to the <textPath> -- also in previous tutorial. But unlike the previous tutorial, we'll use a <path> element that takes a d= attribute, which consist of a series of x,y coordinate points for each point (dot) on the curve itself (documented here).

Okay, I realize that's dense code, but bare with me -- it's only a few more steps to get the tool working!

Moving the points to State

We currently only have state.text. We need to also store the points themselves, so we can adjust them with sliders. Let's move to state the Array of points:

<State
    text="Modulo Text FX!"
    points:='[ [ 20,40 ], [40,10], [60,40], [80,70], [100,65], [120,90] ]'
></State>

The :='[ and ]' syntax is the syntax for creating Arrays in Modulo: If this concept is new to you, consider reading the section on Container types in part 4 of the Modulo.js interactive tutorial. Next, we need to put the points back into our SVG. We can use the |join:' ' filter to combine the points with spaces:

<path id="curve" fill="transparent" d="M 10,50 C {{ state.points|join:' ' }}" />
<text><textPath href="#curve">{{ state.text }}</textPath></text>

Creating a hard-coded, rotated range input

At this point, we have moved the points into the State variable, but we still don't have range sliders for them! Let's do that next. We'll use a "for-loop" for this, so we can repeat the same range-slider code for every point in our point Array. But before we do that, let's start with a "hardcoded" range-slider, which will only control "Point #2", just to make sure we can at least control one of them successfully:

<label style="display: inline-block; width: 5%">
  <strong>2</strong>
  <input [state.bind] name="points.2.1"
      style="position: relative; transform: rotate(90deg); left: -60px; top: 60px"
      type="range" max="100" min="0" />
</label>

Let's decipher this: The label and input have style= attributes to space it by 5% width of the page, rotate the input 90 degrees, and move it 60x60 pixels. The name="points.2.1" (equivalent to points[2][1] in other languages) causes the input to control one specific value in the State variable.

Duplicating the input with a for-loop

We've successfully gotten an input to work with a single point (points.2). We could copy and paste this name="points.2.1" code 6 times (once for each point), altering each copy to name="points.3.1", name="points.4.1" etc. This would allow us to control every point. Or, we could save ourselves time, and use the Modulo Template for loop. Let's see how that looks:

{% for index, point in state.points %}
    {# ... #} <strong>{{ index }}</strong>
    <input [state.bind] name="points.{{ index }}.1" {# ... #}
{% endfor %}

Note the only difference here is the 2 is replaced with {{ index }} -- the "index" of the current point we are looping through.

<x-CurvedTextArtTool> - Embeddable results

Add the range smooth-rendering ="input" tweak, explained in this tutorial, and we get the following results. Hope you enjoy this tutorial -- follow for more like this!

<!DOCTYPE html>
<template Modulo>
  <Component name="CurvedTextArtTool">
    <Template>
      <section>
        <p><input [state.bind] name="text" title="Text" maxlength="15" /></p>
        {% for index, point in state.points %}
          <label style="display: inline-block; width: 5%">
            <strong>{{ index }}</strong>
            <input [state.bind]="input" name="points.{{ index }}.1"
                style="position: relative; transform: rotate(90deg); left: -60px; top: 60px"
                type="range" max="100" min="0" />
          </label>
        {% endfor %}
      </section>
      <svg viewBox="0 0 200 100" style="width: 55%; margin-top: 100px">
          <path id="curve" fill="transparent" d="M 10,50 C {{ state.points|join:' ' }}" />
          <text><textPath href="#curve">{{ state.text }}</textPath></text>
      </svg>
    </Template>
    <State
        text="Modulo Text FX!"
        points:='[ [ 20,40 ], [40,10], [60,40], [80,70], [100,65], [120,90] ]'
    ></State>
  </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-CurvedTextArtTool></x-CurvedTextArtTool>

Comments

[johnblommers]

But the second to last line **does **summon JavaScript contrary to the article title.

<script src="https://unpkg.com/mdu.js"></script>

and without it the slider's don't occur.

[michaelb]

The title says "+ 1 extra file" -- that one extra JS file is the "+ 1" extra file dependency! Modulo.js (mdu.js on npm) is a single-file mini-framework.

However, the ~30 lines of component template code that the tutorial is covering is "pure HTML". That is, many tutorials for little components like this require embedding custom imperative JavaScript code. My hope is this will make it easier for developers who are still newbies with JS, but may still want to write web components using just HTML and templates -- that is, "no JS or node" skills are required for this tutorial. Hopefully that makes more sense what I meant!