Grow your CSS skills. Land your dream job.

Dynamic centering of text

  • # April 29, 2013 at 7:04 am

    [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?

    # April 29, 2013 at 7:15 am

    >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.

    # April 29, 2013 at 7:23 am

    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/

    # April 29, 2013 at 7:45 am

    On his old static site he controlled every post with margins and widths so the content is always centered. So I’m just trying to achieve some kind of auto centering css according to whatever the length of the sentences are for each poem.

    Those links you showed look awesome bit I don’t know where to begin?

    # April 29, 2013 at 7:46 am

    [Your text to link here...](http://bullpen.no-masters-refuge.org/rohatsu.html “http://bullpen.no-masters-refuge.org/rohatsu.html”)

    # April 29, 2013 at 7:55 am

    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.

    # April 29, 2013 at 7:58 am

    That helps. Thanks again Paulie.

    # April 29, 2013 at 8:06 am

    You don’t think some kind of margin-left: auto and margin-right: auto with a display: inline would work. The client would have to use ul for all the poems?

    # April 29, 2013 at 8:17 am

    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.

    # April 29, 2013 at 8:20 am

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

    A thought.

    # April 29, 2013 at 8:53 am

    @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.

    # April 29, 2013 at 9:41 am

    @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.

    # April 29, 2013 at 10:01 am

    Yeah some sentences in some posts are really short and others are really long. The paragraph needs to center according to whatever the longest sentence is, but text in the paragraph stay left aligned.

    # April 29, 2013 at 10:03 am

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

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

    # April 29, 2013 at 10:18 am

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

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".