Make all capital letters bold? 3

MikeBronner · Dec 23, 2003

I'm taking a stab in the dark here, and was wondering if it's at all possible to make all capital letters on a page bold using only CSS, without having to do any special coding on the page itself? So if I have the text "Watch the big brown Fox jump!", I'd like it to be "Watch the big brown Fox jump!"

Is this possible?

Take Care,
Mike

BillyRayPreachersSon · Dec 23, 2003

Michael,

I don't believe this can be done.

Dan

tlhawkins · Dec 23, 2003

Hey Mike,

as far as I know that is impossible at this time. There is a CSS way to set the first character style seperate from the rest. I've heard it is a hack and should never be used

but here it is anyway:

P:first-letter { font-weight: bold; }

People have used it for drop-caps by changing the size and background color also... but it should get you a bold first character on some browsers.

I hope it helps...

The javascript to make all Caps bold would probably be just as hard to get to work cross-browser. Let us know if you want to takle it... we may be able to help.

Travis Hawkins
BeachBum Software
travis@cfm2asp.com

http://www.beachbumsoftware.com

BillyRayPreachersSon · Dec 23, 2003

Mike,

Taking what Travis said, if you wrapped every word with an initial capital inside a span tag with a class, then applied the above CSS to that class, that would have the desired effect.

I know it's a big and very cumbersome hack, but it might work ;o)

Dan

MikeBronner · Dec 23, 2003

Thanks for the responses guys

. I've seen pretty much all the same things you're talking about here. Was hoping for a mirracle functionality of CSS

.

I'll probably resort to hacking it using some scripting method. At any rate, I'll provide you with my solution here (should be sometime later tonight).

Take Care,
Mike

BillyRayPreachersSon · Dec 23, 2003

Mike,

If you want to do it with script, consider the following:

Code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
	function makeTextBold()
	{
		var textStr = document.getElementById('turnCapsBold').innerHTML;
		var outputStr = '';
		for (var loop=0; loop<textStr.length; loop++)
		{
			if (textStr.charCodeAt(loop) >= 65 && textStr.charCodeAt(loop) <= 90)
				outputStr += '<B>' + textStr.charAt(loop) + '</B>';
			else
				outputStr += textStr.charAt(loop);			
		}
		document.getElementById('turnCapsBold').innerHTML = outputStr;
	}
//-->
</SCRIPT>
</HEAD>
<BODY>

<P ID=&quot;turnCapsBold&quot;>The cat sat On The Mat, OH YES HE DID!</P>
<INPUT TYPE=&quot;button&quot; VALUE=&quot;Click here to make all capital letters bold&quot; onClick=&quot;makeTextBold();&quot;>

</BODY>
</HTML>

I hope this helps!

Dan

MikeBronner · Dec 23, 2003

Dan,

I was thinking of something along the same lines. However, here my complication: I need to parse the entire page, not just a certain tag specified with a class. When parsing the entire page, I need to somehow ignore HTML tags, javascript, and any other script when replacing capital letters.

Tough cookie, this one

.

Take Care,
Mike

BillyRayPreachersSon · Dec 23, 2003

Hmmm... tough one, as you say...

I wonder if making up your own tag would work - for example:

Code:

<MIKE>text here</MIKE>

and then using getElementsByTag (is that right?) to get all "MIKE" tags... could work, but you'd need to check in all browsers...

Dan

MikeBronner · Dec 23, 2003

That would work, but that would basically mean that I have to encapsulate all my text in my tags... again tedious work which I want to avoid at all costs.

I'm currently leanign towards embedded fonts. That might be the best solution.

Take Care,
Mike

JavaDude32 · Dec 23, 2003

Write\Look for a tag parser script to ignore everything between a < and > including the carrots?

BillyRayPreachersSon · Dec 23, 2003

And better watch out for those pesky wabbits chasing the carrots, too! *grin*

BillyRayPreachersSon · Dec 23, 2003

Mike,

Here's what I've come up with. It parses the DOM recursively, changing all uppercase letters to bold:

Code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--

	var bodyObj = null;

	function recurseTags(rootTagObj)
	{
		// recurse through DOM
		for (var loop=0; loop<rootTagObj.childNodes.length; loop++)
		{
			if (rootTagObj.childNodes[loop].childNodes.length > 0) recurseTags(rootTagObj.childNodes[loop]);
		}

		// make text bold...
		if (rootTagObj.childNodes.length == 1)
		{
			var textStr = rootTagObj.innerHTML;
			var outputStr = '';
			for (var loop=0; loop<textStr.length; loop++)
			{
				if (textStr.charCodeAt(loop) >= 65 && textStr.charCodeAt(loop) <= 90)
					outputStr += '<B>' + textStr.charAt(loop) + '</B>';
				else
					outputStr += textStr.charAt(loop);			
			}
			rootTagObj.innerHTML = outputStr;
		}
		//alert('ID:' + rootTagObj.id + 'NumChildren:' + rootTagObj.childNodes.length + '\n\n' + rootTagObj.innerHTML);
	}

//-->
</SCRIPT>
</HEAD>
<BODY onLoad=&quot;recurseTags(document.getElementById('bodyTag'));&quot; ID=&quot;bodyTag&quot;>

<P ID=&quot;t1&quot;>
	The cat sat
	<P ID=&quot;t2&quot;> ON THe </P>
	mAt
</P>
<SPAN ID=&quot;t3&quot;>
	YaaaH!
	<P ID=&quot;t4&quot;>8888 aBc 8888</P>
</SPAN>
<P ID=&quot;t5&quot;>1234aBc567</P>
<A ID=&quot;t6&quot; HREF=&quot;wibble.html&quot;>Click HERE for more</A>

</BODY>
</HTML>

It might be what you're after.

NOTE: If you run the above example, you'll see that some of the code doesn't get bolded.

This is by design. If I made the code bold *all* uppercase letters, you'd run into problems where you might have:

Code:

<SPAN ID=&quot;wibble&quot;>
	<IMG SRC=&quot;Pic01.jpg&quot;>
</SPAN>

turning into:

Code:

<SPAN ID=&quot;wibble&quot;>
	<IMG SRC=&quot;<B>P</B>ic01.jpg&quot;>
</SPAN>

So to that end, you must make sure that if you want the text to be run though the parser, it must reside in its own tags (even if they're made up tags, or P tags, whatever).

Hope this helps!

Dan

MikeBronner · Dec 23, 2003

Thanks Billy! Nice code. I see the problem with bolding ALL uppercase letters. I'm trying to find a workaround for that.

However, all this code leads me to conclude that it would be far less overhead to use embedded fonts. It would provide cleaner and compacter code, making the entire page much more efficient and saving bandwidth for larger pages.

Take Care,
Mike

MikeBronner · Dec 23, 2003

Hi all! Thanks so much for your input and effort. Eventhough it hasn't led to my ultimate solution, I did learn a little about recursive functions.

Here's how I solved it:
=======================

1) Downloaded WEFT 3 from Microsoft to do the embedding:

http://www.microsoft.com/typography/web/embedding/weft3/default.htm

2) Downloaded Font Creator (Shareware) to customize my font set:

http://www.high-logic.com/fcp.html

My goal was to have all capital letters show in bold, as well as convert them to lowercase, so that 'Help!' would end up being 'help!' on my pages, without any reprogramming or restructuring of any of the pages. Here's how I used the two program above:

1) Started Font Creator and opened up Tahoma and Tahoma Bold. Highlighted all lowercase letters (a to z) in Tahoma Bold, copied them, and pasted them in Tahoma over the letters A to Z. This gave me the alphabet I desired.
2) Changed the properties of this file to give it a unique Font name (in the Format > Naming... menu item). Saved the font in one of my directories.
3) Went to the Control Panel in Windows, opened the fonts folder and installed my newly created font.
4) Fired up WEFT and went through the process of creating an embedded font file. WEFT also gave me the necessary CSS commands to use CSS to embed the font.
5) Uploaded my embedded font file and my new style sheet and I was up and running.

Now the only question remains on browser compatibility, but time will tell. You can see my result here:

http://www.emmgee.com

(Please don't critisize for broken links or bad design, the page isn't finished yet.)

Here's a star for the helpfull posts. Merry Christmas!

Take Care,
Mike

tlhawkins · Dec 23, 2003

Great work Billy,

star from me too.

Travis Hawkins
BeachBum Software
travis@cfm2asp.com

http://www.beachbumsoftware.com

BillyRayPreachersSon · Dec 23, 2003

Mike,

Nice post on embedded fonts... something I knew nothing about, I now know more about ;o)

*s all round, then!

Dan

ChrisHunt · Dec 24, 2003

"Now the only question remains on browser compatibility"

AFAIK embedded fonts work in IE, but not in Mozilla.

Pity, because it's a really elegant approach to the problem - just load the EOT file from your style sheet and name it in your CSS like any other font. Hopefully the Mozilla-heads will ignore the fact that it comes from Micro$oft and implement it too!

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Make all capital letters bold? 3

MikeBronner

Programmer

BillyRayPreachersSon

Programmer

tlhawkins

Programmer

BillyRayPreachersSon

Programmer

MikeBronner

Programmer

BillyRayPreachersSon

Programmer

MikeBronner

Programmer

BillyRayPreachersSon

Programmer

MikeBronner

Programmer

JavaDude32

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

MikeBronner

Programmer

MikeBronner

Programmer

tlhawkins

Programmer

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor