Back To Website Design Forum

Different font's for different letters

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post May 22nd, 2010, 2:17 am

I am using a font on a site that is very nice, however I can not stand the question-mark (?) - sorry not sure why I did that, i'm sure most of you know what a question-mark looks like :roll: -
is there a way to have a different font for the ? to the rest of the text short of putting a <span> around each one, something on the fly???
^__^
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 22nd, 2010, 2:17 am

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post May 22nd, 2010, 2:44 am

I suppose you could setup JS that searched through #textnode elements for question marks and wrapped them for you on documentready.

The only other things I can think of would be pretty vulnerable to browser settings like font sizes and whatnot. Not to mention being just plain silly. (background image question mark for instance)
Strong with this one, the sudo is.
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post May 22nd, 2010, 7:40 am

how would I go about doing that then (I think I will stay away from the background option! ;))
^__^
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post May 23rd, 2010, 2:35 am

Does any of this make sense ? :D

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>Wrap Question Marks</title>
   <style type="text/css" media="screen">
   body {color:#f00;}
   .question {color:#0f0;}
   </style>
   <script type="text/javascript">
   var wrap_questions =
   {
      mask: '<span class="question">$1</span>',
      scanElm: function(elm)
      {
         for(var c = 0; c < elm.childNodes.length; c++)
         {
            var child = elm.childNodes[c];
            if(child.nodeType == 1)
            {
               wrap_questions.scanElm(child);
            }
            else if (child.nodeType == 3 && child.data.indexOf('?') != -1)
            {
               var new_child = document.createElement('span');
               new_child.innerHTML = child.data.replace(/(\?+)/, wrap_questions.mask);
               child.parentNode.replaceChild(new_child, child);
            }
         }
         return;
      }
   };
   window.onload = function()
   {
      var body = document.getElementsByTagName('body')[0];
      wrap_questions.scanElm(body);
   }
   </script>
</head>
<body>
   <div>hello world !!?!
      <div>
         <div>
            stuff ?
         </div>
         stuff
         <div>
            more stuff ?
         </div>
         here is some text
      </div>
      <span>text</span> is <span>here?</span>
   </div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.    <title>Wrap Question Marks</title>
  5.    <style type="text/css" media="screen">
  6.    body {color:#f00;}
  7.    .question {color:#0f0;}
  8.    </style>
  9.    <script type="text/javascript">
  10.    var wrap_questions =
  11.    {
  12.       mask: '<span class="question">$1</span>',
  13.       scanElm: function(elm)
  14.       {
  15.          for(var c = 0; c < elm.childNodes.length; c++)
  16.          {
  17.             var child = elm.childNodes[c];
  18.             if(child.nodeType == 1)
  19.             {
  20.                wrap_questions.scanElm(child);
  21.             }
  22.             else if (child.nodeType == 3 && child.data.indexOf('?') != -1)
  23.             {
  24.                var new_child = document.createElement('span');
  25.                new_child.innerHTML = child.data.replace(/(\?+)/, wrap_questions.mask);
  26.                child.parentNode.replaceChild(new_child, child);
  27.             }
  28.          }
  29.          return;
  30.       }
  31.    };
  32.    window.onload = function()
  33.    {
  34.       var body = document.getElementsByTagName('body')[0];
  35.       wrap_questions.scanElm(body);
  36.    }
  37.    </script>
  38. </head>
  39. <body>
  40.    <div>hello world !!?!
  41.       <div>
  42.          <div>
  43.             stuff ?
  44.          </div>
  45.          stuff
  46.          <div>
  47.             more stuff ?
  48.          </div>
  49.          here is some text
  50.       </div>
  51.       <span>text</span> is <span>here?</span>
  52.    </div>
  53. </body>
  54. </html>
Strong with this one, the sudo is.
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post May 24th, 2010, 7:10 am

thanks! as for your question, I makes no sense to me at all but it works so thats the main thing I really need to learn javascript! :lol:
^__^

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 86 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.