Different font's for different letters

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

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)
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

how would I go about doing that then (I think I will stay away from the background option! ;))
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

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>
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

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:

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 36 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.