Skip to main content

Forums

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

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #44431
    fooman
    Participant

    I’m doing a site and the design has a lot of one-line justified text sections. It’s kinda important to keep it this way I guess.

    Just curious, is there a way to do this or fake it without using images?
    Text-align: justify; doesn’t do anything with single-line sections.
    Using pixel-values for font-size isn’t reliable from browser to browser.

    Anyone have any guidance?

    #133500
    Paulie_D
    Moderator

    >one-line justified text sections

    Even if it’s just two words?

    That sounds pretty awful.

    >It’s kinda important to keep it this way I guess.

    Is it…have you checked?

    #133507
    Merri
    Participant

    You can hack it like this:

    h1 {
    height: 1.5em;
    line-height: 1.5em;
    text-align: justify;
    text-align-last: justify;
    }

    h1:after {
    content: ”;
    display: inline-block;
    width: 100%;
    }

    I guess this is the easiest way to get the effect. Hard limits it to one line though. I don’t have time to verify how wide the browser support status is, but text-align-last is IE6+ I think. There are also other browser vendor specific properties, but I can’t recall those from the top of my head. Mobile web limits my search-ability right now.

    #133513
    Merri
    Participant

    Ah, that way. No CSS way, but you can push some JavaScript to do it: http://codepen.io/Merri/pen/dquki

    Someone else is probably able to shorten the jQuery code.

    #133527
    Merri
    Participant

    In this case magic numbers could be poison as not everyone may have the intended font. So I’d say do what you can with CSS (`text-align: center;`) and then throw JavaScript for those who support it (the vast majority).

    Images could be other alternative that isn’t mentioned yet, but that would require more work. It is quite easy to give `width: 100%;` to images and have them scale. All the rest isn’t that easy.

    #133534
    wolfcry911
    Participant

    perhaps this would work:

    http://fittextjs.com/

    #152995
    noahblon
    Participant

    Fantastic tip Merri!

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