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?
You could try:
<h1>Two<span> </span>Words</h1>
h1 span {
display: none;
}
That'll handle the code-related accessibility issues.
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.
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
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...
