Formatting Text Elements – Part 1

Introduction to Formation of Text

Hello and welcome to chapter 15 of the MakeStories 101 course. In this chapter, we are going to look at how to format your text.

So You have now added the heading tag or a paragraph tag to your story canvas.

The next thing you want to do is you want to change the way it looks. We will use this tooltip element over here, and we will add text. By default, the heading to text is added. If you see by default, you can see the right panel is disabled, or it is opaque.

You cannot actually control any of these elements in the right panel. Now, when you're going to click on the text tag, the design element will become active.

In this tab you can see the first option is alignment and distribution, or the second one is appearance. The third one is text, and then we have the other options.

So we will start with appearance. We will come on alignment and distribution later because this particular section applies to all the elements, irrespective of whether it is text or, image or anything else. So, first, let's take a look at the appearance.

Five Ways to Change the Color Appearance of Text Elements

Color

As the name suggests, we can do multiple things with the appearance of your text element. Now when we click this, the first option that we will see is color, so here you can, if you disable the color, it will be removed. So we keep this color option enabled by default.

Now, when you click on this color swatch over here, you will be presented with the colored picker. Again, with this color picker, you can move around and you can select the color of your choice. From here You can change the color.

From the slider, you can change the opacity of the color, or you can control the alpha component of the RGBA. Again, if you have the color combination of your choice, it can be an RGB value or it can be a hex code or it can be an HSLA code. So we will write here, #000, and it will, okay let’s try #FF000.

We can try FF0000 and it will apply. You can even enter red or you can select blue. There are various ways that you can select that color using the color picker.

Background Color

The second option that you can see here is called the background color. Now when we enable this here, we will see that this is a rainbow color gradient over here.

So the rainbow color gradient will be shown in the color picker whenever the color is set to white. So we will click on the white color inside the rainbow gradient. Again, we will be presented with a color picker.

Here we will see that the background color has two options. One is called the box. And another one is called the highlight.

As the name suggests the box background color will be applied to the entire box.

Suppose you have this box of width 360 pixels, and the background color will be applied to the entire box.

Now, when you change this to highlight irrespective of how big the box is, or the element is, the background color will be applied only to text that is there in the element.

Border

The third option that you can see is the border. Now, remember that when you select the border, it will be applied to the entire box and not to the highlighted ones. So here on the border, you have various options like you have a solid border, dotted border.

When you select the dotted border you can see that the border type has changed from solid to dotted. Then You have dashed, double, groove, Ridge, and Inset. So These other different types of borders that you can select.

The second option you will see here is the size of the border. Suppose we changed the size of the border to two pixels. The border has changed to two pixels, the thickness.

You can also change the color of the border by clicking the color swatch over here.

Then Below this option, you have these text border alignment options. Where you can turn off the borders, manage the side of the border.

Let's say we don't want to border on the top and the bottom.

We will click both top and bottom border alignment, and the top and bottom borders will be turned off. The moment you select all four borders, the last icon over here will be active. So this is how you can apply the border over the text element.

Again, remember if you applied the border while you have the highlight option selected, the border will still be applied to the entire lament and not just the highlighted elements.

Box shadow

The next option that we have over here is the box-shadow.

As the name implies, a box-shadow will be applied to the entire box. If you have applied box-shadow to your text element, change your background to box.

This will look much better as compared to the highlight background. Now here, you can see that you have two kind of shadows, one is the box-shadow and one is the inset shadow.

Now the inset shadow will be actually applied to the inside of the box.

The outside box-shadow will be applied outside the box. Now here, you have four options. When is the X, Y blur and spread? Now when you move the X to the positive side, it will move along the X-axis.

If you're taking it to the negative side, it will go into the negative side. Same with the Y. If you change it to positive, it will go down and if you change it to negative it will go up.

The third option that you have is called the blur. If you reduce the blur, it will change to a solid color. If you increase the blur, it will fade out a little bit and it will become smoother.

The spread is basically the size of the shadow. Again, finally, you can see the box-shadow color by clicking this color swatch over here, and then you can control the opacity because most of the time, the box shadows or the drop shadows are more subtle in nature.

Drop shadow

The final option that we have here is called the drop shadow. You should use the drop shadow when you are using highlight background colors.

Now since we have the highlight option selected either click or drop shadow. You can see that the shadows are applied to the selected area or the area where we have the highlight color.

Again, here you have the X. So it moves along the X-axis. The Y option moves along the y-axis.

Here again, you have the blur. If you change this to zero, it will become solid.

Again, you can change the color by clicking on the color swatch, and then you can control the alpha level to make it more subtle.

This is how we saw the five ways you can change the color appearance related to the color of your text element. All about Opacity, Border radius & Padding of the Text Elements

Opacity

The last three things that we have over here are the opacity, the border radius, and the padding. As the name implies, changing opacity will change the opacity of your text element.

Border radius

We have a border radius again, if you see here, you have two options. One is the border-radius for the whole image. Here we have a border-radius, but with four different corners.

Now, when you change this, you can see that the corners of the text element are becoming rounded. This is the main purpose of using the border-radius.

When you click the second border-radius option, you can control each and every corner of your text element. When you move between these text boxes, you can see that the corresponding corner is highlighted.

Let's say we don't want any border areas on the bottom right, and the top left corners. To do that we will select the text element and go into the individual corners, we will change the first box to zero and change this third box to zero.

Now you can see whenever we move between these text boxes, it will show us which particular corner is being controlled by the particular text box.

Now we can see that over here, the bottom right, and the top left corners don't have a zero border radius.

Again, if you click the first box radius option, all the border radius will be set to zero and then you can change it for all the corners.

Padding

Padding works the same as the Border Radius. Now here, you can see that the padding is zero at this point of time. Now, if we change the padding or if we increase it will increase from all the foresight.

If you want to control it individually, that is top, right, bottom, and left. Let's say we don't want any kind of padding on the top and the bottom.

So here we have zero borders on the top and bottom, and then on the right and left, we have three pixels at the bottom.

Again, if you click on the first padding option, it will change to zero for all the sites. Let's say we go with five-pixel padding.

This is how it will look, but now you might want to introduce some gaps between each and every line of the text. So we will go into the text tab. We will open it up and change the line-height to 2em.

Now you can see that we have a beautiful text element, which is nicely formatted, and which has padding. It has highlighted text.

We also have spacing between all the lines of the text element.

In the next lesson. We will see how to control the text properties that are font name, font size family, and all those things.