literature

CSS Tricks: Limiting .text width

Deviation Actions

pica-ae's avatar
By
Published:
68 Comments
22K 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 Ikue, nichtgraveyet or GinkgoWerkstatt, 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 - 2021 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 
DAKA-DoubleAgent's avatar
It doesn't work for me......
pica-ae's avatar
I am afraid all CSS features only work for core members. 
Sleepy-Stardust's avatar
You are really good at explaining stuff. This is awesome to know!!!! :squee: I love coding and this helps immensely (:
pica-ae's avatar
Thank you :) :hug: I am glad it helps :la:
TehAngelsCry's avatar
:wave: Hi there!
Your awesome tutorial has been featured in my weekly journal: Tutorial Tuesday #17.
I'd love if you could take a look, and offer support and encouragement to your fellow tutorial writers through comments on their deviations :la:
pica-ae's avatar
Tngabor's avatar
The classical typography studies tell that actually 55-75 characters per line
are the best for readability, but on modern websites it's usually a bit more, to
compensate for the wide resolutions.

I've read a great article on Smashing Magazine, regarding line length, and it
says that line-height * 25, is a good length to start with. So far, it has been
working great for me :)
pica-ae's avatar
Yeah, I've read several articles on it :nod: It's an interesting topic :D

Of course it depends on font size and typeface as well. I am usually working with a width of 600-700px for one line, seems to be the right amount to read without moving your head from side to side while reading :)
Tngabor's avatar
If you're working with a 16-18px font size then that's a great width :)

Anyway, i finally found the article:
[link]
Great-great read! :)
pica-ae's avatar
Yeah, I moved over to using slightly bigger font sizes, I don't like 12pt :lol:

Thanks, bookmarked that one :)
Tngabor's avatar
No problem! :)
suki42deathlake's avatar
hi , do you know how to type test so it overlaps with letters ovelaping or as if falling - like text in a creepy horror film ? ^^
pica-ae's avatar
Do you maybe mean something like this? [link] I am not sure if that is what you are looking for or something else :noes:
suki42deathlake's avatar
oh yes exactly that ! ^^ thank you for the link ^^
pica-ae's avatar
okay, cool :) but try not to use it too much on dA ;)
suki42deathlake's avatar
XD lol , used it here :[link] XD
SylenisCrafts's avatar
I'm not sure I'm getting it right TT__TT
I want the text to stay within the background image I'm using and the padding thing was just maniacal, and the margin code seems to fix it if you view the journal from my deviant page, but if you want to view the journal itself the text and bg image fly apart again. I have no idea what I'm doing wrong D:
pica-ae's avatar
It would help if you had a screenshot of it or a link :) Anyhow, you need to know how big the image is and then give the class that same number as width.
As for flying apart, it might be that the text is aligned to one side and the image to the other.
SylenisCrafts's avatar
Hah, sorry. I did eventually crack it in the dead of night a few hours after I commented ^^; it's as you just suggested there, I'd not aligned the sides properly, but now I've sorted. Thanks for the quick reply though ^^
pica-ae's avatar
Grasschamp's avatar
This could help. Been trying a code for some time now.
pica-ae's avatar
I hope it works for you :)
Join the community to add your comment. Already a deviant? Log In