Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

In headings, I am getting rid of spaces between two-word phrases and using color to differentiate between the words instead.

EXAMPLE:

I would like this...

<h1>Two Words</h1>

to render like this...

TWOWORDS

How can I achieve this style while maintaining accessibility? The issue is that I don't want to simply remove the space in the html. Will I have to use javascript to strip them out? Would there be accessibility issues with that too?

share|improve this question
    
Since this has to do with code, I'm not sure why it was migrated to the Graphic Design forum. –  Joel Glovier Sep 11 '11 at 18:26
    
Web questions are allowed here provided the questions and answers relate to CSS affecting layouts and not just to any of the other technologies typical in web stacks (i.e., not just HTML, SQL, JS). –  Philip Regan Sep 12 '11 at 18:59
add comment

4 Answers 4

If you'd use php, the code would be something like this:

function gdse3647_headline( $input, $echo = false )
{
    $output = '';
    // Make uppercase
    $headline = strtoupper( $input );
    // Build array
    $headline = explode( ' ', $headline );
    // Number the single words
    for ( $i = 0; $i <= count ( $headline ); ++$i )
    {
        $output .= "<span class="headline-{$i}">{$headline[ $i ]}</span>";
    }

    if ( $echo )
        return print $output;

    return $output;
}

If you'd call it like this:

echo '<h1>' . gdse3647_headline( 'Two Words' ) . '</h1>';

...your output would be (in plain html)...

<h1>
    <span class="headline-1">TWO</span>
    <span class="headline-2">WORDS</span>
</h1>

...and you could style it however you want via css (see @Jin answer for ex.).

Still wondering what this has to do with Graphics Design...

share|improve this answer
add comment

I like @Jin's answer, but I would use the ex measurement, or another relative measurement. px is an absolute measurement.

<h1><span>TWO</span> Words</h1>

h1 { word-spacing: -0.5ex; }
h1 span { ... }

The CSS rule above works perfectly for a variety of faces and sizes from 10px to 27px (at least). The -8px rule from the previous answer only looks right with a font size of 16px (IMO).

Check out the W3C "Font-relative lengths" topic - pretty interesting stuff.

share|improve this answer
1  
Not "ex", "em". Em is the relative measurement to the width of the inherited font-size. –  Joel Glovier Sep 11 '11 at 18:29
    
You obviously did not click the link. Title of the W3C reference: "5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units...(note the second measurement). –  Dawson Sep 12 '11 at 5:35
add comment

you can try

<h1><span>Two</span> Words</h1>

h1  { word-spacing: -8px;  color: #ff0000; }   
h1  span { font-weight: bold;  color: #000; }

you can play with word-spacing: -npx based on your font-size

share|improve this answer
add comment

You could try:

<h1>Two<span>&nbsp;</span>Words</h1>

h1 span {
    display: none;
    }

That'll handle the code-related accessibility issues.

share|improve this answer
1  
Probably is the best way to accomplish this, since CSS doesn't affect how Google sees your page or screen readers. And it's most appropriate because the markup is still semantically meaningful, while the CSS is only affecting presentation. –  Joel Glovier Sep 11 '11 at 18:31
    
And how would you go and color them different? –  kaiser Sep 11 '11 at 20:01
    
add another span around one of the two words and then give the span's classes to distinguish them apart. –  DA01 Sep 11 '11 at 20:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.