Dynamic centering of text

[jknetdesign]

[Your text to link here…](http://nomastersrefuge.org/category/poetry/ “Link”)

If every post has different width becasue the client desires to control where sentences are cut off, how can I auto center the paragraph but keep text left justified?

[Paulie_D]

>how can I auto center the paragraph but keep text left justified?

Does not compute. You can’t ‘center’ and justify at the same time.

I’m not seeing the client’s problem to be honest. Is this a hyphenation issue or, perhaps a whitespace/word-wrap problem.

>If every post has different width

I don’t understand this either. Will the posts not be in containers with consistent widths?

If the client is **that** paranoid as to where sentences end then inline break tags are, I think going to be the answer.

I can’t think of any CSS/JS solution that could divine to the content, parse it out and insert styling (or whatever) to do this automatically.

[Paulie_D]

Ohhh….it’s poetry, now I see (part) of the issue.

Don’t know if this is of use: http://thecampvs.com/formatting-poetry/

**please note that this article has been updated as noted **

http://thecampvs.com/2012/03/29/formatting-poetry-v-2/

[Paulie_D]

On looking through the various poems on the current site there doesn’t seem to be a consistent layout.

Some are left aligned: http://bullpen.no-masters-refuge.org/forty-fourth_time.html

Some centered: http://bullpen.no-masters-refuge.org/how_am_i.html

Some staggered: http://bullpen.no-masters-refuge.org/two_poems.html

Some are even numbered: http://bullpen.no-masters-refuge.org/suite.html

Is this important to the poet? I think the job might be bigger than you think.

If the post is to be centered regardless of poem layout then a JS solution would probably be required to calculated the widest content string and set a specific width to the post and then center it.

[Paulie_D]

The `margin-auto` only works with a set width (or max-width) on the element…and that’s the one thing we don’t know.

>The client would have to use ul for all the poems?

I don’t know…but I think what you were after was a single (albeit flexible) solution for all the content. I’m unsure if the linked articles are precisely what you need but I think they offer a good jumping off point.

Basically, using the list is, realistically, a ‘hack’ used to avoid the necessity of extra `
` or `

` tags. I think it’s a reasonable solution but it’s never going to be semantic.

Whether some other element (heck even a table) would be better I don’t know.

[Paulie_D]

Hmmm…just remembered this: https://css-tricks.com/centering-in-the-unknown/

A thought.

[chrisburton]

@jknetdesign Are you asking how you can center the text horizontally with text being aligned to the left (which is by default)?

If you’re asking about justified text, well, I wouldn’t do that. Hyphenation isn’t supported in all browsers and when justifying text it’s important for hyphens to be in place. Otherwise words will have large gaps between them.

[Paulie_D]

@chrisburton The issue is, AFAIK, is that there will be an elements (at the moment it doesn’t matter which) of unknown width to fit inside a div of ( I assume) a known width (or possibly 100%).

The width of the ‘child’ element will be determined by the longest string of content ( a line of verse). The content of the poem will. I believe, be left aligned but, if I am right, it may not matter.

He’s looking for a ‘universal solution’. Initially I was leaning towards pure JS but, without testing, the ‘Centering in the Unknown’ **might** offer a solution.

[Paulie_D]

Hmm…seems to work but I’m still getting some ‘line breakage’.

Tweakable guess: http://codepen.io/Paulie-D/pen/IazfD

[Merri]

Have fun: http://codepen.io/Merri/pen/ClKsd

[wolfcry911]

http://codepen.io/wolfcry911/pen/ECGFq

[Paulie_D]

@Merri Awesome.

[Author]

Posts