Understanding Text Transformation in CSS

Hello guys.

Welcome to our CSS series.

In our last segment, we covered three advanced level topics.

First was Vertical align, second was whitespace.

And after that word wrap.

I hope you have tried all the three practicals that were shown.

We will move ahead with our today's segment.

Our today's segment is on CSS text transform technique, with the help of CSS how we can transform the given text in different approaches.

There are many ways and methods available with us.

We will individually see each and every transformation technique.

First of all, we will see what is text transform? Like it is written here.

Text transform, this CSS property allows us to change the case of the text means whatever text we have written in which way we can change that.

We usually call it text transform, it is used to control the text capitalization, this CSS property can be used to make the appearance of text in all lowercase or all uppercase.

So, basically, with the help of text transform, we can capitalise our text, we can transform it in uppercase or in lowercase or there should be no transformation applied on our text.

We can apply that property as well.

Like it is given in the syntax here.

Text transform in which the first is capitalise means capitalising the text, then is uppercase means transforming it in uppercase, then is lowercase, transforming it in lowercase.

None means we will remove it, there should be no transformation technique applied.

Initial and inherit, usually both of these means that initial means any transformation property or any other property not only for text transformation but in all CSS properties if in any place, initial is written.The default property gets applicable there.

And inherit means whatever the property of our parent class gets inherited in Child Element, whenever we use inherit whatever is the CSS of the parent element, it will be applicable in the same way to our child element.

If in any places you'll see CSS inherit property, for example, background colour inherits for example, like it is, text transform inherit.

In that what do you have to identify is from the given element, whichever are the parent elements CSS, the same CSS will be applicable to our current element, that is the meaning of inherit.

So, we will go ahead with today's technique and one by one we will check all the techniques.

The first one is capitalised.

So, in capitalised what happens? It transforms the first character of each word to uppercase, means whichever would be the first character of the word, it will transform that into uppercase.

It is written here that it will not capitalise the first letter after the number, which means after our text, in that text, in any word if the first character is a number.

After the number if the character comes, let's say the alphabet comes.

That property will not capitalise that.

So, what will be capitalised: the very first alphabet of the word will be capitalised.

If the very first alphabet of the word is a number.

And after the number the alphabet is coming, then that will not be capitalised.

Then come here.

If we apply the capitalised property on a word that already has capital letters, then the letters of that word will not switch to lowercase.

Means the first character is already capitalised.

It cannot be converted into small or lowercase, means what does capitalised property do? If the character is not capitalised, then make it capitalised.

If it is already capitalised, then you skip it.

These are the characteristics of our capitalised property.

Here the syntax is given text transform capitalised.

It means wherever we want to use it, we will only use text transform capitalise.

So, now to understand this we will open sublime text so that we can see it practically.

So first of all, HTML, example text transformation and that we will add a transformation related code.

First of all, we will save it.

We will give the program a name text transformation.HTML, save.

Now we will go in this folder and open it, now this program is running, we will zoom into our text.

Currently we have not added anything in our sublime text, that's the reason it is not showing up.

So, for text transform property we will first of all take a p tag and then we will write in it, this is the paragraph to be converted to capitalised.

So, this is our p tag in which we have not used any capital letter in every place we have used small letters.

Now, in this p tag we will apply the text transform property.

So, here I will write style, text, transform, capitalise, reload.

As soon as I reloaded the first letter of every word, it became capitalised. You can see that.

So, how does text transform property works, the first character of every word will capitalise that.

So, this is our text transform, we will give it h3.

 Example, text transform capitalised.

Then our next example So, first of all we will go to the slide.

Our second text transform property is of the uppercase, like it is mentioned here.

Whichever will be our word that will be transformed into uppercase.

So, using uppercase if we perform the same practical.

So, here it will be text transform, uppercase, even in that we will add P tag this is the paragraph to be converted to uppercase.

In this we will add style, text transform, uppercase.

As soon as I reload it.

Here you can see that my entire line has transformed into uppercase.

So capitalised and uppercase.

This is the major difference between the two.

In capitalised the first alphabet or the first character only will be capitalised, in uppercase the entire statement will be transformed into uppercase.

Now, we will take the same example for lowercase also.

So, first of all we will go into the slide, here it is written lowercase, it transforms all the characters of the word into lowercase whatever we must have written it will transform it into lowercase.

So, what will we do for that? First of all, the heading we will give, lowercase, we will add the same line but whatever is written over here we will write it in uppercase initially.

So, I will switch on the capslock and I will write, This is the paragraph to be converted to lowercase.

And after switching off the caps lock, save, reload.

 You can see that what I have written in the program is in uppercase, still in the output that we are getting our character has transformed into lowercase.

So, this is our lowercase.

Now, come none.

What happens in none?  It is a default value that has no capitalization, it renders the text as it is.

It means in text transform none, no transformation will be applied.

So, for that what will we do? First of all here h3 I will write it again, text transform none and inside P we will take this… in this we will put some mixed text.

Like in this I have kept the T capital, I will keep it totally capital.

This is the paragraph with mixed characters.

Okay.

Here we have kept few characters, few alphabets capital, we have kept few small in this.

We will apply style to this, text transform none, reload.

So, you can see that whatever I have typed we are getting it as it is.

If I had kept the T capital, I am getting T.

I have kept this capital; I have kept the graph capital.

So, in text transform none, no technique is applied whatever we have passed we get it as it is.

So, in none no text transformation will be applied.

So, this Text Transformation.

How we can transform the text in different ways, we can capitalise it, make it uppercase, lowercase or we can prohibit any transformation, so that it is not applied.

We can do that using none.

Next we will go ahead with our slide, now comes text overflow, we had seen overflow property previously.

But that overflow property we had applied on division and elements.

Let's say there is a div, if there is a specific portion of the element, if the text or the content goes out of it.

How do we handle that? Do we have to show it outside of the div or not? We had handled it in that way.

Our current property is of text overflow, if text is going out of div or division on any element.

How do we have to handle that? We will see that in today's technique.

Like it is written here, this property specifies the representation of overflown text, means our text is going out of the specified region, means it is overflowing, which is not visible to the user.

If it is getting overflown.

And it is not visible to our user.

It signals the user about the content which is not visible.

With the help of these techniques, with the help of text overflow our user gets an idea, a hint that there is content here but I'm not able to see it.

So, it's a way to show that there is content but inform the user that there is content but it is not visible to you.

This property helps us to decide whether the text should be clipped, show some dots or display a custom string.

Means either we have to click the text, we have to stop it from there.

We have to show the dots, when we show a continuing statement, in that case, we place the three dots.

Dots represents that statement has not been stopped there.

It is continuing further.

So, for that we use the dots, showing some dots which we call as ellipses.

With the help ellipsis you can represent that the text is still there or display a custom string, it means any other string, means current paragraph which is a long string in its place, you show up such a string, which will help identify that there is a text beyond it.

So, this property helps us in showing, either we cut the text, clip it, we can keep dots or we can pass informative string over there.

Like it is written here, this property does not work on its own. We have to use white space, no wrap and overflow hidden with its property.

Which means if we are applying only text overflow property, it will not work.

We will have to use properties like whitespace and overflow.

Here the syntax is given, in text overflow we can use a total of three things.

Clip, ellipses and string.

So, even if we will perform with an example, we will check what all can be done inside it.

So, here the first property is of the clip property.

So, what is there in clip, it is the default value that clips the overflown text means usually this is our default property.

Clip means cutting, whichever portion is there.

It can truncate the text at the limit of the content area.

Means whichever is our content area, in front of it, it can truncate.

Means if my division is of 100 pixels, whatever text is going outside of 100 pixels, it will cut it.

truncate it.

So that it can truncate the text in the middle of the character.

So, here it is a possibility that there is some word which is made up of 5, 6, 7 or 8 characters.

From all these characters it can get cut even by the 3 characters.

So, this half information can be passed to the user.

Even this will be performed with an example.

So, we will generate a new program.

HTML, example text overflow, save.

Text overflow, we will open it, so here my program has opened.

So, what will we do in this program? First of all we will take a division, let's say div, in the div, I will add a text like, this is a very long text that is going out of the div width.

Okay.

Here currently we have not given width to div, so whichever statement I'm passing we can see it completely.

Now to this div, style, with the help of internal CSS we'll give it width.

We will give the width of 100 pixels, as soon as I give 100 pixels, here 100 pixels means this is the width, we will give the border, so that we get a clearer picture.

Border 1px solid.

Okay.

So, this is our border.

So, this is the size of 100 pixels.

As soon as I shorten the width, my context is falling down.

Now we have to stop the text from falling down.

So, word-wrap,  you can see that as soon as I applied whitespace No wrap property, the division we are getting as it is of 100 pixels width and my text has come in a straight line.

Means, whitespace no wrap means our text is not wrapping, it should wrap and usually fall down.

But we have stopped it, about no wrap we have seen in previous segments that how we can wrap the text.

So, here I have given no wrap property.

Because of no wrap, my text is going out of my div’s width.

I will give it 150.

So we have given the text 150.

Now what is happening here is my text is now going outside the width now my text which is overflowing was dismissed text is getting overflown and going out of the division so here overflow was the first property in our division here first of all if I give overflow hidden property Okay, so what is happening here my text has been hidden, so our division is of a specific width we are getting the text and the rest of the text is going out.

So here before the clip what we had seen was that our text overflow property, it works with two properties.

First is whitespace no wrap and second was overflow hidden.

We have applied both whitespace and overflow hidden.

Now our main property of text overflow, that we can use.

If I go inside this and give the text overflow clip property and I reload it.

What is happening here, our result is as it is, it means whichever is my text that has been clipped.

We're not able to see it.

So, this is our first example of a text overflow clip, like it is written here.

It truncates the text at the limit of the content area, which means the text out of the content area truncates.

If I give it 160.

You can see that t and then h is visible, after the word is the.

So, t and h is visible.

Our rest of the content has clipped.

Now, to the same thing div, style overflow.

We can pass this here.

We will take the same division, we will write again, this is a very long text and in the place of the clip, we will apply an ellipsis.

Which is our next, ellipses.

Ellipsis means that the value displays an ellipsis means with the help of dots our content which is cut will show up to us.

So here we will write an ellipsis, okay, so our content is coming.

Here, text overflow click.

And here text overflow ellipsis, save.

Okay.

As soon as we applied the ellipses property, from where our text was getting cut.

We are getting three dots over there.

These three dots indicate that our text is quite long, which means even after the text, the statement exists but that is not visible to us.

So, this was our ellipsis example.

So, in total we have seen two properties, one was a clip and one was ellipses.

We have to see whether our text is actually visible or not.

For that what we can do we have these 2 divs.

 Division first, in which we have passed clips and ellipsis and overflow hidden we have given.

Let's say to this div, if on any div we apply hover property, div, hover and inside that we will write overflow visible, okay.

Like I'm taking it here.

My text is getting visible to me, if I'm taking it on the top, even then my text is visible.

So here we have applied one technique that overflow hidden when our text is getting cut.

But when we hover on that thing, take the mouse, in that case our text should be visible, after getting cut, how much text is available.

Same, when we have made overflow visible, the text is showing up.

So, this is our technique, how we can show the text which is overflown and is getting cut.

So, these were two methods of overflow.

Then comes our text orientation.

We have seen text transformation and text overflow, we have seen these two things.

Now we will see text orientation, which means in which way we can set the orientation of our text, like it is written over here.

The CSS property specifies the orientation of characters in the line of content.

Orientation means our text will come from left to right or right to left.

All this we will show through it.

Normally all the properties available for text orientation will be applied in vertical mode.

In horizontal mode, the text orientation doesn't get applied.

Currently, this PPT is there.

On this slide whatever content has been written, it is written in a horizontal way, it means horizontally left to right we are able to see it.

But if we have to apply the text orientation property, we can apply that property only when our text is vertically aligned.

Means, if we rotate the current slide at 90 degrees.

So, we will get the text in this way.

So, on that vertically aligned text.

We can apply text orientation properties.

Like it is written here.

It helps us to control the display of languages that use the vertical script, which means if it is written vertically, only then we can apply it.

This property has five values, mixed, sideways, upright, sideways-right and use-glyph-orientation but here there is one thing that we have to keep in mind is that whichever latest browsers are there, those only mix and upright.

They can use only these two properties.

sideways, sideways-right and use-glyph-orientation, these three properties are not able to show their effects in our latest browsers, whenever you're applying text orientation, mixed and upright, only these two will show the effect in the browser.

Rest will not be able to show.

This property depends upon the writing mode property.

It works only when the writing mode is not set to horizontal.

Means, like I said our current slide view that is there, horizontal view, in the horizontal view these properties don’t work.

Syntax is text orientation mix and upright.

It will work in these two.

We will see it with an example here.

I have given an example writing mode.

As you can see, it will work only vertically.

So, giving writing mode vertical lr is very important.

If in this place horizontal will be there, it wont work.

Even this we will see with an example.

Inside the example, exa mple text orientation, after saving the program we will open it, we will take two divisions in it.

First division, we will give any ID to it, ABC, in that we will add a text like, this is learnvern’s CSS segment explaining about the text orientation property, learnvern is a best learning path to understand the programming in vernacular languages.

Okay.

Now this is our paragraph.

Now we will cover this paragraph in a div.

So, let's say, style, div, padding, 10px, width, 150px, Okay.

Border 1px solid.

Okay.

So, this is our division and in this is our text.

This is currently left to right but in horizontal way, for this # ID is…In this slide we have written a few properties.

First property is writing mode vertical lr.

So, this will apply first of all, writing mode vertical lr, save.

Let's see what changes with this, right now there is no change that is seen.

Means there is something that is missing.

So, we will go for it.

So, here is my ID name properly.

We are reloading.

Now we are seeing over text vertically.

Earlier our text was written horizontally.

Now we are getting it vertically, you can see this is Learnvern, CSS segment explaining… we are getting it in this way.

Here we are kept vertical lr writing mode.

Along with that we will add text orientation as well.

In our slide the 1^st text orientation is mixed.

So, we will apply mix.

So, this mix which is by default is showing up.

 So, here you can see that the width is as it is, I will apply even the height over it.

Let's say height, 200 pixels.

After 200 pixels you can see in which way the text is moving ahead, here this is Learnvern’s CSS segment explaining about the Text orientation property.

So, what is happening over here?

My test has become vertical in place of horizontal.

And it is showing up left to right.

If instead of left to right, I make it right to left.

You can see that my text will be read in this way.

This is Learnvern’s CSS segment explaining about the text orientation.

So, what has happened here?

When we wrote left to right.

At that time our text was going left to right.

So, it was written in this direction.

But currently when I went right to left.

At that time, it is seen in this direction So, this is a proper direction.

If we tilt our face a little, we can read it.

This is a text orientation in which in place of horizontal, we can set the text vertical.

Here the text orientation is kept mixed, so we are seeing it in this type.

Now if I take the same division A, B, C, D, E, F okay.

Here def, we have changed the ID name.

Now we will go over slide.

So, our second example is vertical rl, and then text orientation upright.

So, after writing upright save and reload.

So you can see that below we are seeing one more segment and inside that we have the text this way.

This is Learnvern’s…if in the place of rl we will make it lr.

We will properly see it.

This is our content.

This is Learnvern’s CSS segment, explaining about the… So, you can see when we apply the upright property, our text is visible vertically, we can read it left to right.

And all the characters are seen one below the other.

 This text orientation is also the vertical orientation.

We are not reading it in this way but from up to down.

We are reading it from top to down.

So, this is our second text orientation.

So, we will give a heading to our first text orientation.

Text orientation, mixed, upright.

Okay.

We are getting 2 examples.

First is mixed and the second is upright.

With the help of these 2-text orientations, when we display any text on the screen.

 We can design or display in this way.

So that it looks in a designer way.

Usually all these properties, when in the markets we make the websites or we work with the web development, these are not used that much.

But these are text transforming properties.

We can play around with the text and transform it through learning this property is important to us.

Today, we have covered 2 properties in text orientation, mixed and upright.

Today, in total we have covered three things.

I hope all the three things that we have covered today.

First was the text property of transformation.

Then there was a text overflow.

Last was text orientation.

All three text related properties that we have seen today.

I request that you perform today's practical on your own.

Check it and when you perform the practical and when it is properly running.

It is really well and good.

 If you have any queries or comments, click the discussion button below the video and post there.

This way, you will be able to connect to fellow learners and discuss the course.

Also, Our Team will try to rectify your issues at the earliest and revert to you.

Our next segment is in which we will justify, text decoration and text align like CSS properties.

Thank you.