2

I have a navigation block made of a list with links. I wanted all the links to be the same length with "text-align:justify" which works fine. I also wanted to add a hover effect on thos links, using CSS3 transformations and data-hover. That works too. The effect is basically making the same word translate from the bottom pushing the original word out of scope. This is done through data-hover (the data-hover specifies the content that comes into view). My problem is that I can't get to justify that content. I can change it's color, size, anything, I can even make a "text-align:right" for example, and it works, but the text-align: justify won't.

So here is the HTML:

<nav class="cl-effect-5">
    <ul class="main-nav">
        <li><a><span class="fulljustify" data-hover="C&nbsp;O&nbsp;L&nbsp;L&nbsp;E&nbsp;C&nbsp;T&nbsp;I&nbsp;O&nbsp;N">C O L L E C T I O N</span></a></li>
        <li><a><span class="fulljustify" data-hover="A&nbsp;R&nbsp;T&nbsp;&nbsp;&nbsp;I&nbsp;S">A R T   I S</span></a></li>
        <li><a><span class="fulljustify" data-hover="S&nbsp;H&nbsp;O&nbsp;P">S H O P</span></a></li>
        <li><a><span class="fulljustify" data-hover="A&nbsp;B&nbsp;O&nbsp;U&nbsp;T">A B O U T</span></a></li>
    </ul>
</nav>

Here is the CSS:

.fulljustify { text-align: justify; text-transform: uppercase; }
.fulljustify:after { content: ""; display: inline-block; width: 100%; }

ul li{
    list-style: none;
}
nav a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.35em;
    width: 100%;
}
span{
    width: 100%;
}

nav a:hover,
nav a:focus {
    outline: none;
}

.cl-effect-5 a {
    overflow: hidden;
    height: 1.35em;
}

.cl-effect-5 a span {
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.cl-effect-5 a span::before {
    position: absolute;
    top: 100%;
    width: inherit;
    color: yellow;
    text-align: justify;
    display: inline-block;
    content: attr(data-hover);
    font-weight: 700;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}

I have created a jsfiddle so you can see more clearly what the result that I'm looking for is: http://jsfiddle.net/Lngvv5hq/

Why, if I can text-align:right the data-hover, doesn't the text-align justify work ? Any way to get it done ? If I can't do it through text-align:justify, do you happen to have any suggestions of other ways to achieve the result that I'm looking for ?

Thank you in advance

Icarus
  • 1,627
  • 7
  • 18
  • 32
zdev
  • 25
  • 6

3 Answers3

1

By default, text-align: justify doesn't justify the last (or the only, as in this example) line of text in the block. Justification of the spans themselves works only because of the hack with 100%-wide ::after pseudo element that always wraps to the new line. Microsoft introduced text-align-last: justify (currently adopted by CSS Text Level 3 spec and supported by Firefox with -moz- prefix), but WebKit-/Blink-based browsers still don't support it.

Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57
  • I see. Well as the justifying of text is supposed to be bad practice in web dev I guess it will be long before they implement it in all browsers, maybe never haha. Thanks for the intel ! – zdev Aug 25 '14 at 12:04
0

text align don't work this way bro, for now you can use word-spacing for all menus separately..

for ex:-

word-spacing: 46px;

will be best for COLLECTION

Dennis
  • 1
  • 1
  • This is not how I wanted it to be done but hey it achieves the result. I'll probably switch the px to % for the responsiveness. Thank you ! – zdev Aug 25 '14 at 12:01
  • yes use % and u can target li using nth-child, right ?? – Dennis Aug 25 '14 at 12:04
  • since all the lines need different values of letter-spacing I'll just make a class for each I guess edit: it doesn't work with % haha – zdev Aug 25 '14 at 12:16
  • you can use li:nth-child() selector instead of making classes for all li items – Dennis Aug 26 '14 at 07:35
0

You probably came across this post about justified text in your research, and Ilya summarized that post quite nicely.

I took another approach at your menu, drawing from Dennis' suggestion about letter-spacing. Still, that's a tough pony to ride as your shortest word ("Shop") means that every 1px in letter-spacing means adding 4px horizontal width to your text. Likewise, "Collection" adds 10px of horizontal space for each 1px in letter-spacing. With these "multipliers" as a constraint, the words will be tough to match exactly in width.

Here's a Fiddle demo: http://jsfiddle.net/erlingormar/ymgobrx2/2/

(In the initial process of identifying the justified-problem, I changed the approach with your data-hover attribute (added a span) just to be sure that it wasn't causing the problem):

Community
  • 1
  • 1
erlingormar
  • 451
  • 2
  • 11
  • Thank you for this. And didn't it work when you tried to justify the span instead of the data-hover ? – zdev Aug 25 '14 at 12:15
  • I am trying to change the pixels into %, for the responsiveness, but it seems that letter-spacing doesn't handle %. Any guesses on that ? – zdev Aug 25 '14 at 12:19
  • I didn't have any luck justifying the text in the SPAN elements, but then again I didn't go knee deep in workarounds. The problem is that the SPANs only take up one line of text, and a one-liner (similar to the last line in a long paragraph of justified text) won't justify and occupy the entire line length... according to browers' current behavior. I thought of the responsive aspect of using letter-spacing, but figured you'd probably have so set some breakpoints in your design so that you'd really only have to define perhaps 3-4 letter spacing values. Yeah, it's not all that great. – erlingormar Aug 25 '14 at 12:25
  • Aight i'll bootstrap a few breakpoints then, or just switch to totally different, more mobile-friendly, navigation menu for smaller devices. Thank you ! (this is my first question asked, should I change the topic to answered or something ?) – zdev Aug 25 '14 at 13:13
  • No, you don't need to really... having a marked answer that helped you with your problems is good enough Good luck with your project! :) – erlingormar Aug 25 '14 at 13:21