Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Dynamic centering of text

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #44428
    jknetdesign
    Participant

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

    #133483
    Paulie_D
    Member

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

    #133484
    Paulie_D
    Member

    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/

    #133488
    Paulie_D
    Member

    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.

    #133491
    Paulie_D
    Member

    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.

    #133492
    Paulie_D
    Member

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

    A thought.

    #133495
    chrisburton
    Participant

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

    #133497
    Paulie_D
    Member

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

    #133499
    Paulie_D
    Member

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

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

    #133504
    Merri
    Participant
    #133506
    wolfcry911
    Participant
    #133509
    Paulie_D
    Member

    @Merri Awesome.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.