Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Putting a border round text letters

  1. #1
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Putting a border round text letters

    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!

  2. #2
    Join Date
    Oct 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  3. #3
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote 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!

  4. #4
    Join Date
    Sep 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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?

  6. #6
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Wrong place for this man. For DD Scripts only. Post it in the JavaScript section.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  7. #7
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

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

  8. #8
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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/
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  9. #9
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

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

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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>
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •