Shop Mobile More Submit  Join Login

CSS Tricks: Limiting .text width

Wed Mar 7, 2012, 7:23 AM
Hello!
Today I wanted to share a little CSS Trick with you :la: Many other people have done this before, awesome people like Ikue, thespook or ginkgografix, 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 :)
Add a Comment:
 
:iconohidontkno:
ohidontkno Featured By Owner Jul 25, 2017  Hobbyist Photographer
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 
Reply
:icondaka-doubleagent:
DAKA-DoubleAgent Featured By Owner Dec 9, 2015
It doesn't work for me......
Reply
:iconpica-ae:
pica-ae Featured By Owner May 3, 2016  Professional Interface Designer
I am afraid all CSS features only work for core members. 
Reply
:iconsleepy-stardust:
Sleepy-Stardust Featured By Owner Jun 17, 2014  Hobbyist Interface Designer
You are really good at explaining stuff. This is awesome to know!!!! :squee: I love coding and this helps immensely (:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 19, 2014  Professional Interface Designer
Thank you :) :hug: I am glad it helps :la:
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner Sep 10, 2013  Professional Interface Designer
: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:
Reply
:iconpica-ae:
pica-ae Featured By Owner Sep 16, 2013  Professional Interface Designer
Thank you :D 
Reply
:icontngabor:
Tngabor Featured By Owner Jul 8, 2013  Professional Interface Designer
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 :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 8, 2013  Professional Interface Designer
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 :)
Reply
:icontngabor:
Tngabor Featured By Owner Jul 8, 2013  Professional Interface Designer
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! :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 9, 2013  Professional Interface Designer
Yeah, I moved over to using slightly bigger font sizes, I don't like 12pt :lol:

Thanks, bookmarked that one :)
Reply
:icontngabor:
Tngabor Featured By Owner Jul 9, 2013  Professional Interface Designer
No problem! :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 9, 2013  Professional Interface Designer
:)
Reply
:iconsuki42deathlake:
suki42deathlake Featured By Owner Jun 23, 2013   General Artist
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 ? ^^
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 24, 2013  Professional Interface Designer
Do you maybe mean something like this? [link] I am not sure if that is what you are looking for or something else :noes:
Reply
:iconsuki42deathlake:
suki42deathlake Featured By Owner Jun 24, 2013   General Artist
oh yes exactly that ! ^^ thank you for the link ^^
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 24, 2013  Professional Interface Designer
okay, cool :) but try not to use it too much on dA ;)
Reply
:iconsuki42deathlake:
suki42deathlake Featured By Owner Jun 26, 2013   General Artist
XD lol , used it here :[link] XD
Reply
:iconfeatherstitched:
FeatherStitched Featured By Owner Jun 17, 2013  Professional Artisan Crafter
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:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 18, 2013  Professional Interface Designer
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.
Reply
:iconfeatherstitched:
FeatherStitched Featured By Owner Jun 18, 2013  Professional Artisan Crafter
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 ^^
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 24, 2013  Professional Interface Designer
alright :)
Reply
:icongrasschamp:
Grasschamp Featured By Owner Mar 3, 2013  Hobbyist General Artist
This could help. Been trying a code for some time now.
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 4, 2013  Professional Interface Designer
I hope it works for you :)
Reply
:iconlubrian:
Lubrian Featured By Owner Jan 25, 2013  Professional Digital Artist
your tutorial was great :D i was just wondering though, when i type
max-width: 400px;
for example, it also affects the dimensions of the image i've used for my background. is there some additional code/different code i need for it to only affect the text?
i need my text width to be smaller to fit the background image graphic..
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 25, 2013  Professional Interface Designer
Thank you :hug:

That really depends on where you use the image :)
In a journal, if I want an image behind my text, but wider, I place the image in the div tag that surrounds the text; in a dA journal this would be for example like this:
.gr-body {
background: url("…");
max-width: 600px;
}

.text {
margin: auto;
max-width: 400px;
}

That way I can control the text independently of the div that contains the background image.

Of course, this is when you work with widths. The other option would be to add padding to the div that contains the text:
.text {
background: url("…");
margin: auto;
max-width: 400px;
padding: 50px;
}


I hope this helps you :aww:
Reply
:iconlubrian:
Lubrian Featured By Owner Jan 26, 2013  Professional Digital Artist
sorry for another comment, just realized that when i add padding it pads out a border around the text, is there any way to only add padding on the right hand side for example? (the text is already in a good position, it just ventures a little far to the right and overlaps with something in the background)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 26, 2013  Professional Interface Designer
yeah, you can apply different padding for each side of a box :)

padding-right: 20px;

will limit it to the right side only.

an alternative is write it for all 4 sides in one line, starting at the top and going round clockwise:

padding: 0px 20px 0px 0px;
Reply
:iconlubrian:
Lubrian Featured By Owner Jan 28, 2013  Professional Digital Artist
awesome, you are the best, thank you!! saved me :D
Reply
:iconlubrian:
Lubrian Featured By Owner Jan 25, 2013  Professional Digital Artist
thanks that helped a lot!! much appreciated :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 27, 2013  Professional Interface Designer
awesome :)
Reply
:iconfantasy-alive:
fantasy-alive Featured By Owner Jan 10, 2013  Professional Interface Designer
Very helpful and easy to follow. Thanks for sharing.
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 11, 2013  Professional Interface Designer
Thank you, I am glad you like it :aww: :huggle:
Reply
:iconevelivesey:
EveLivesey Featured By Owner Jan 8, 2013  Professional Photographer
Thank you :hug:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 10, 2013  Professional Interface Designer
I am glad you find it helpful :aww: Thanks :huggle:
Reply
:iconevelivesey:
EveLivesey Featured By Owner Jan 10, 2013  Professional Photographer
:hug:
Reply
:iconbeyondgalaxies:
BeyondGalaxies Featured By Owner Apr 22, 2012  Hobbyist Writer
is this for premium?
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 23, 2012  Professional Interface Designer
yes, you have to be a Premium Member to use CSS and Installable Skins to customize your journal
Reply
:iconlicnobius:
licnobius Featured By Owner Apr 21, 2012  Hobbyist Digital Artist
Thank You!!
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 22, 2012  Professional Interface Designer
No problem :D
Reply
:iconcuppybakes:
cuppybakes Featured By Owner Apr 16, 2012
How do I change the color of my text? ;n;
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 17, 2012  Professional Interface Designer
you do so by changing the color:#ffffff; values to the color of your liking :)
Reply
:iconvashtastic:
Vashtastic Featured By Owner Apr 11, 2012   Digital Artist
awesome!!!
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 15, 2012  Professional Interface Designer
:huggle: thanks :D
Reply
:iconmrhellz:
MrHellz Featured By Owner Mar 13, 2012  Professional General Artist
Brilliant. Thank you!
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 13, 2012  Professional Interface Designer
I am glad it helps :aww: :hug:
Reply
:iconbradleysays:
bradleysays Featured By Owner Mar 11, 2012
Featured here! :love:

Keep up the great work! :happybounce:
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 11, 2012  Professional Interface Designer
Thank you :huggle:
Reply
:iconikue:
Ikue Featured By Owner Mar 8, 2012  Hobbyist Digital Artist
:clap: Very slick!
Reply
Add a Comment:
 
×

:iconpica-ae: More from pica-ae



Featured in Collections


More from DeviantArt



Details

Submitted on
March 7, 2012
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
21,150 (1 today)
Favourites
125 (who?)
Comments
68
×