literature

CSS Tricks: Limiting .text width

Deviation Actions

pica-ae's avatar
By
Published:
23K Views

Literature Text

Hello!
Today I wanted to share a little CSS Trick with you :la: Many other people have done this before, awesome people like Nobody, Nobody or Nobody, and now it's me too :giggle:
This first trick is very simple in execution, but I want to spend some time explaining why you should do it. That's why this journal has become a bit long :lol:

All about improving Readability!


When it comes to designing long copy texts, there are quite some challenges in order to create something easy to read and enjoyable to look at. One of the issues that may occur is text, that is running too long. The longer a line of text gets, the hard it is for the reader to follow the flow of text.
In some case you may have to even move your head from the beginning of a line to its end. And once you move your head, it becomes a lot harder to find the next line of text.
You may not even notice this while reading. But you will notice that your eyes get tired and you may even get a little headache after reading for while. This is a sign of bad design and has to be avoided at all costs! Always, seriously always consider the readability of your design! I see many people completely ignoring this point and that is a shame. If you take the time to write a journal entry, you do want people to enjoy reading it, right? So don't make it too hard for them :)

Anyway, here's what I want to talk about today:

Studies have shown that online 100 characters per line is an acceptable standard for layouts. This number does not tire the eye and makes it easy to catch the next line after a break.
Since different typefaces have different character lentghs, this of course makes it hard to find a pixel size that makes up for this. I came to the conclusion that 600 px text width is a fair balance between different typefaces.

In the following I will show you a easy and simple trick to apply this to your journal skins. What I want to achieve is a left-aligned text-field that runs no longer than 600px and is centered inside the whole journal. (Not centered text!)

So, what’s the challenge?


Journals on dA are "liquid" boagworld.com/design/liquid-vs… . Their width varies depending on where you look at the journal (e.g. user profile, journal tab or journal deviation page) and your and other people’s browser resolution.
This means, you cannot position the text-field per se, you have to find a different way of positioning the element relative to its surrounding element.

Center & limit!


We are going to change 2 things in order to center the textfield of our journal and give it a limited width.

.text {

margin: auto;


max-width: 600px;


}


So, how does this work?


The margin describes how far away an element is from what surrounds it. By setting this to auto, the .text element gains equal distance on all sides to the surrounding element.

The max-width simply limits the size of the .text element. It can now never be wider than  600px.

You with me, so far? Yes? Cool. Let’s have a look at custom elements!

Creating a custom box!


If you want to create a box, that has a limited width inside your text field, you will have to create a new class:

.custom-box {

margin: auto;


max-width: 400px;


background:#664d80;


color:#ffffff;


padding:20px;


}

This requires you to enter additional HTML in your text:

<div class="custom-box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</div>


And results in this element:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

This is a simple and easy to remember technique to center elements of which you do not know the width! Two lines of code that make your life a lot easier :XD:

Now, I don't have much to say anymore. Guess I said enough anyway ;)

I hope you enjoyed this little trick and maybe even learned something :heart:

Have a suggestion?


Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.

Simple and easy CSS Trick, that helps you improving readability of your journals :)
© 2012 - 2022 pica-ae
Comments67
Join the community to add your comment. Already a deviant? Log In
ohidontkno's avatar
There you go  pica-ae, a suggestion...
Maybe write at the top of this Really Awesome Interesting Tutorial -
that you have to be core to perform magic tricks like you're explaining..
I got so excited reading this  Tute , I'm just starting to understand the beginnings of 
having a page, sharing, watching etc then I found stamps & other fancy stuff I can
use to decorate my page that I don't know the name of..
And then came YOU 
pica-ae saying we could do all this other fancy stuff
with text & then you say that we're not members of your gang, well , and well.... 
Now I'm off to see what other wonderful Tute's etc are around coz it's a
stumble stumble trip kind of process at the moment..
Thanks for all your hard work with these tute's, we wouldn't know things without people like you and the rest of the team... Heart