PDA

View Full Version : 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
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
<!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.


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.
<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>

OneWay
10-19-2006, 04:03 AM
APOLOGIES:

But first thanks Twey for your time and trouble!

The apologies:

.. For posting in the wrong place

.. For not explaining clearly enough what I'm wanting to do, which is header-type text where all the letters have a different coloured border (outline) round them :

606

which my wife did quickly in Publisher, and in so doing woke me up to the fact that although that graphic looks quite good (because of the font she chose), the letters AND the outlined border do really need to be anti-aliased.

So I shall continue my search in GIMP for how to do it there (simple thing I want to do, in a very complex program that will 'wash the dishes' and then some!)


EDIT: I've now found a sort of tutorial that describes how to do what I want. Will soon be trying to see if I can do it, and will report my results. Thanks.