Skip to main content

Forums

This topic contains 14 replies, has 6 voices, and was last updated by  noahblon 5 years, 4 months ago.

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)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star