Is this ‘print design’ possible with CSS?

[JohnMotylJr]

Hello all,

Lately, I have been super inspired by many different print designs from magazines, books, posters, etc. One such design i had noticed is very simple, clean, and something similar would work perfect in the project i have going right now.

Reference: (http://goo.gl/sYcII) Just an image i scanned from one of my old golf magazines.

My main question is, is it possible to achieve the columned effect with some sort of word wrap? The content i will be adding is not dynamic, only static content that i will add myself. I have created this effect by hard coding the text in different set columns but it is not symantec or clean code.

An option that i had brain stormed would be to use Javascript to set a max char length and than trim it into the next column and so on, but i would like to achieve this with just CSS and a nice flowing word wrap effect.

I will be starting this in a JSFiddle so i can possibly show my progress when i come up with a solution.

Any help would be greatly appreciated.

Thank

[TheDoc]

There are CSS columns, though the support for this is minimal at the moment. Could always use it and then have a JS fallback.

[Staggers]

You could use a tabled layout, I think that would work – though it is rather old fashioned.

[wolfcry911]

you didn’t just suggest that…

[Staggers]

I did, I hate tables as much as the next guy, but if you want something which will run on the most ancient of ancient machines then they’re what you go for.

I suggested it as a contrast to TheDoc’s suggestion, which is something which may need a fallback.

[joshuanhibbert]

@Staggers How is using tables better than the method that is currently being used (hard coding divs as columns)?

[Staggers]

I didn’t say it was better, I just put it out there as an alternative.

I would go for hard coding divs as columns, but tables is also an option if you want to be lazy.

Nothing wrong with a bit of variety to choose from eh?

[joshuanhibbert]

@Staggers We will have to agree to disagree. I personally feel that variety isn’t all that great if the other options are terrible (such as using tables). Since when is being lazy a good excuse?

[JohnMotylJr]

Well, i ended up simply going with this…

.content {

-moz-column-count:4; /* Firefox */

-webkit-column-count:4; /* Safari and Chrome */

column-count:4;



-moz-column-gap:20px; /* Firefox */

-webkit-column-gap:20px; /* Safari and Chrome */

column-gap:20px;



-moz-column-rule:1px dotted black; /* Firefox */

-webkit-column-rule:1px dotted black; /* Safari and Chrome */

column-rule:1px dotted black;

}

I decided to go with the css because i wasn’t worried about the IE support. If i had to i would probably hard code text in the divs and just test with different browsers. I may go ahead and do that.

And about tables, i would probably only use them for displaying data.

[Author]

Posts