Skip to main content

Forums

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 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?

    #133505
    fooman
    Participant

    This reply has been reported for inappropriate content.

    It’s more like a title rather than a section of text.
    It’s actually a narrow area with often one or two words in big bold letters.
    So it’s not a terrible design flaw or anything. Looks good, just dunno how to reliably do this in CSS other than using magic numbers.

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

    #133510
    fooman
    Participant

    This reply has been reported for inappropriate content.

    Thanks for the reply!
    That would only work if it was a really narrow box and was multiple words. It kinda treats the text as blocks rather than treating letters as blocks… if that makes any sense.

    Awesome idea, but wouldn’t be a good solution for this particular weird scenario. I think I literally have to rely on a ‘magic number’ solution for this problem.

    The best I can illustrate this problem is here:
    Codepen

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

    #133524
    fooman
    Participant

    This reply has been reported for inappropriate content.

    Generally curious, would you prefer using a “magic number” or the extra jquery script to do this?

    Thx for posting this. I didn’t consider doing it this way!

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

    #133529
    deeve007
    Participant

    This reply has been reported for inappropriate content.

    1) I woudn’t advise this within any design, it would mean different font leading/spacing/sizes or some combination thereof to make work technically, and there’s nothing worse than inconsistent font styles across a site.

    2) No real way to do this reliably apart from images.

    My advice would be a slight redesign.

    #133530
    fooman
    Participant

    This reply has been reported for inappropriate content.

    how do you bring this up to a designer without starting WW3? haha ;)

    #133531
    deeve007
    Participant

    This reply has been reported for inappropriate content.

    Has the designer created a series of mockups with different text & text lengths in the headings? If so, ask him if he’s comfortable with the leading/spacing/font size being different? If he is then I wouldn’t rate him as a designer.

    But then if that fails, explain that it’s not technically possible without using images, which means they would need to be created manually, and the code added manually, each and every time.

    #133532
    fooman
    Participant

    This reply has been reported for inappropriate content.

    .. indeed!

    thx sir!

    #133534
    wolfcry911
    Participant

    perhaps this would work:

    http://fittextjs.com/

    #133538
    deeve007
    Participant

    This reply has been reported for inappropriate content.

    That would change the font size… seriously, shoot me if a designer wants the heading font to change font size from page to page on the same device/screen width…

    #152995
    noahblon
    Participant

    Fantastic tip Merri!

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star