Is there a simple way to dynamically indent each line in a div?

Question

Is there a simple way to dynamically indent each line of a block of text inside a div? I want the text to conform to the oddly shaped div I made. Example: enter image description here

• Kai Qing: So much as I know, css has no idea about the concept of a "line" - You can wrap specific lines of text in tags, like span, and set nth-child rules for them.
• Kalel Wade: Provide the html you have. It will help to see what your attempting.
• Daniel Williams: I'm going to say, short answer, this is not possible, but you could possibly (though I can't think of a way) use some tricky javascript to do it. All I can suggest is a div per line with stacked <dd> tags to push out the indent with each line.
• Paul: I tried something here, maybe it can help. here is jsfiddle link

Answer 1

This won't work in all cases but something you could do if you wanted to have sloping indents is play with the css transform attribute.

I have made a js fiddle to illustrate...

http://jsfiddle.net/ycvqqxg4/10/

Edited fiddle.

div.indenting-text{
 transform: skewX(15deg);
 font-style: italic;
}

enjoy :)

EDIT:

I've gone back into the js fiddle and improved it to use a different method than the one i mentioned above. This way makes use of a div with its 'shape-outside' set to a sloped polygon so that css naturally wraps the text around the slope instead of it being jimmy rigged by css in the previous version.

here is the js fiddle

http://jsfiddle.net/ycvqqxg4/15/

• Peter Black: Thanks Zezilp! This really helps! I am thinking maybe I will make a custom font. My boss is kinda weird tho... So we will see. But this is probably the closest solution.

Answer 2

You could take a look at wrapping text around images, which can be done with circular images and such, like this example shows

http://demosthenes.info/blog/916/Wrapping-Text-Around-Circular-Images-With-CSS-Shapes

I think it'll give you a nicer effect. You might have to create a blank image template or something though.