Putting a border round text letters

**OneWay** · 10-17-2006, 05:12 PM

I've spent a couple of hours trying to find script of some sort that would put a border round each individual letter in text headers that I want to use. No joy.

I realise that this can be done with various graphic programs available. Sadly we cannot afford any of them.

I suppose that's why no one's written any script to be able to do it. Maybe someone here knows how it can be done.

Many thanks!

**Jobyn** · 10-17-2006, 05:18 PM

I am new here, so take my advice with a grain of salt, but why don't you just use tables just for the header?

**OneWay** · 10-18-2006, 03:03 AM

Originally Posted by Jobyn

I am new here, so take my advice with a grain of salt, but why don't you just use tables just for the header?

Oh, it's not how to put a header up that I'm asking. I can do that. I've long wanted the ability to make text look much better like the 'experts' do, with a coloured border all the way round every letter in a word.

(Yes, I know, if we weren't living on a pension, I'd simply buy a graphics program to do it...)

I just thought someone here may know how to do it via script, that's all. I'm sure it can be done, but I'm certainly not into bugging people!

**panachepad** · 10-18-2006, 06:03 AM

Good luck getting any help from the regulars here. No one answers my posts, ever.

I'd be happy to help you make the graphics you want. Just send me a PM. I'll check it very soon.

**codeexploiter** · 10-18-2006, 06:27 AM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.first
{
	border: 1px solid Teal;
	font-family: serif;
	font-size: 13px;
	font-style: normal;
	color: Blue;
}
</style>
</head>
<body>
<span class="first">T</span><span class="first">h</span><span class="first">i</span><span class="first">s</span> <span class="first">t</span><span class="first">e</span><span class="first">x</span><span class="first">t</span> <span class="first">h</span><span class="first">a</span><span class="first">s</span> <span class="first">b</span><span class="first">o</span><span class="first">r</span><span class="first">d</span><span class="first">e</span><span class="first">r</span> <span class="first">a</span><span class="first">r</span><span class="first">o</span><span class="first">u</span><span class="first">n</span><span class="first">d</span> <span class="first">i</span><span class="first">t</span>&nbsp;This text doesn't have any border around it. Is this what you are looking around?
</body>
</html>

Are you looking for the above one?

**tech_support** · 10-18-2006, 06:31 AM

Wrong place for this man. For DD Scripts only. Post it in the JavaScript section.

**codeexploiter** · 10-18-2006, 06:32 AM

He posted a question in wrong place i assume DDAdmin will soon sorted this out

**djr33** · 10-18-2006, 07:04 AM

I don't really think javascript is the way to modify graphics.
CSS, perhaps, or something like tables.

but, really, use a graphics program.

The GIMP (similar to Photoshop) is free.
http://www.gimp.org/

**OneWay** · 10-18-2006, 06:22 PM

To codeexploiter, no I should have used the word 'outline' I think, a colour edging outlining each letter. Thankyou so much for your time to try and help.

Originally Posted by panachepad

Good luck getting any help from the regulars here. No one answers my posts, ever.

I'd be happy to help you make the graphics you want. Just send me a PM. I'll check it very soon.

That's so very nice of you, thankyou!! I presume you have a graphic program that can do this. What I need is something I can use whenever I need it of course. I've installed GIMP but so far cannot find anything that will do what I need - put a different colour edging around each letter, outlining it.

I guess I just gotta press on herer to see what I can find...

**Twey** · 10-18-2006, 07:26 PM

All of you seem to have gone off on a tangent talking about graphics, but as far as I can see, in the original post it was specified that this was a textual header.

Code:

<h1 id="firstHeader">Some text</h1>

<script type="text/javascript">
function borderLetters(node) {
  var str = node.firstChild.nodeValue;
  
  for(var i = 0; i < str.length; ++i) {
    var tmpEl = document.createElement("span");
    tmpEl.style.border = "1px solid black";
    tmpEl.appendChild(document.createTextNode(str.charAt(i)));
    node.appendChild(tmpEl);
  }
}

borderLetters(document.getElementById("firstHeader"));
</script>

Thread: Putting a border round text letters

Thread Tools

Search Thread

Putting a border round text letters

Bookmarks

Bookmarks

Posting Permissions