FORMATTING TEXT WITH CORVID

Understanding and manipulating the text's .html property.

 

The starting point:

Changing a text's .text property in Corvid is very straightforward. You write whatever you want inside double or single quotation marks and what you see is what you get:

$w('#text1').text = 'Hello, world!';

But if we do this, our text1 will lose any and all special formatting you may have made in the editor. So how do we retain or even add formatting to a text element? By using the text's .html property instead:

$w('#text1').html = '<p>Hello, world!</p>';

Using HTML tags will allow us to make parts of our text bold, italicdifferent colors, different sizes, have different character spacing, become links, and much more.

<p> and <h> tags:

As we saw in our first .html example, we assigned a value to text1 that included <p> at the beginning and </p> at the end. In the Wix editor, when we click on a text element and try to change its theme, we see a list of different options with Paragraph 1 somewhere in the middle. Any text we write between <p></p> in Corvid will follow this theme's specifications exactly. So if the Paragraph 1 theme is in Museo font, red, 16 pixels large, and bold with character spacing set at .05, then this:

$w('#text1').html = '<p>Hello, world!</p>';

Results in this: Hello, world!

But what if we want to use the Heading 4 theme or the Paragraph 3 theme instead? It's very simple, actually. Instead of using <p></p>, we'll use <h4></h4>:

$w('#text1').html = '<h4>Hello, world!</h4>';

Or else:

$w('#text1').html = '<p class="p3">Hello, world!</p>';

When changing to a Heading theme, the tag is h followed by the number, and when changing to a Paragraph theme, the tag is p class= followed by p and the number in parentheses. To avoid any confusion, we put the entire html value in single quotation marks and the class attribute in double quotes. You can switch these around, but don't make them the same.

style:

Sometimes, we want our text to mostly follow a theme, but change one or two stylistic attributes. In that case, we can use style to tweak our text to what it needs to be. Let's say Heading 1 is set to be white and 42 pixels tall, but in this case we want it to be black and 36 pixels large. We would set style to:

$w('#text1').html = '<p class="p3" style="font-size:36px;color:black;">Hello, world!</p>';

The entire list of style attributes supported in Corvid are: font-face, font-size, font-weight, font-style, text-decoration, color, background-color, text-align, margin-left, text-shadow, line-height, and letter-spacing. The best way to understand all of these and learn how to set valid values is by searching for them in the Mozilla Developer Network WebDocs.

<span>, <b>, and <i>:

What if we have a sentence that has a different style attribute partway through? Like for example, we want the world in Hello, world! to show up green instead of black but otherwise follow the same theme? In that case, we use the <span> tag like this.

$w('#text1').html = '<p class="p3" style="font-size:36px;color:black;">Hello, <span style="color:green;">world</span>!</p>';

Because the exclamation mark comes after the end of the </span> tag, its color will still be black. The <b> and <i> tags are used in much the same way, but any text in between <b></b> will also be made bold and any text in between <i></i> will also be italicized.

You might wonder why you wouldn't simply do this:

$w('#text1').html = '<p class="p3" style="font-size:36px;color:black;">Hello, </p><p style="color:green;">world!</p>';

If you try it, you'll see that it results in world! being in a new paragraph. Which brings us to...

<br>:

The <br> tag is short for break, and unlike the rest we've seen so far, this one doesn't have to be closed off. This is because its purpose is to break your current line and start a new one. So if we want to start world in a new paragraph and maintain the same theme, we can write:

$w('#text1').html = '<p class="p3" style="font-size:36px;color:black;">Hello, <br><br>world!</p>';

One <br> will simply break our current line and put world! on the next, but by using two <br> tags next to each other, we can leave an empty line in between.

If you want your next paragraph to have a different theme than the first, you would do this instead:

$w('#text1').html = '<p class="p3" style="font-size:36px;color:black;">Hello, </p><br><h1>world!</h1>';

<a>:

Last, but certainly not least, we have the <a> tag, which allows us to create links. You can set the link's address by using its href attribute. You can use any of the valid Corvid link formats found here:

https://www.wix.com/corvid/reference/$w.LinkableMixin.html#link

Let's link world to our home page but not the exclamation mark:

$w('#text1').html = '<p class="p3" style="font-size:36px;color:black;">Hello, </p><br><h1><a href="/">world</a>!</h1>';

And now, let's make it so that it opens our homepage in a new window/tab instead:

$w('#text1').html = '<p class="p3" style="font-size:36px;color:black;">Hello, </p><br><h1><a href="/" target="_blank">world</a>!</h1>';

This should get you comfortable with the basics of using the .html property in Corvid. If you want to learn how to do cooler and more advanced stuff such as making text responsive and setting text/links dynamically/conditionally, click below to continue on to the Advanced Text Formatting With Corvid tutorial.