Blogged by Ujihisa. Standard methods of programming and thoughts including Clojure, Vim, LLVM, Haskell, Ruby and Mathematics written by a Japanese programmer. github/ujihisa

Wednesday, January 6, 2010

Gmail In Other Fonts

I use gmail. Gmail supports changing the layout. Gmail doesn't support changing the font family of messages. The default font family is Arial, but today I preferred to use Georgia instead. I tried to fix the font family with JavaScript, but it was totally tough.

My first code:

  • javascript: var a = document.getElementsByTagName('iframe'); for (var i in a) { var b = a[i].contentWindow.document.getElementsByTagName('div'); for (var j in b) { b[j].setAttribute && b[j].setAttribute('style', 'font-family: Georgia'); } }

It changes all texts in all <div>s, but the layout will be completely broken. The content of an email appears on the bottom of the browswer.

My second code:

  • javascript: var a = document.getElementsByTagName('iframe'); for (var i in a) { var b = a[i].contentWindow.document.getElementsByClassName('ii gt'); b.item() && b.item().setAttribute('style', 'font-family: Georgia'); }

It certainly changes the font of the content of an email, but when you moved to other messages, the font will back to the default ones.

Finally, my friend Hamachiya2 succeeded in writing the code of it.

  • javascript:(function(){ function cssr(doc, sel, dec) { var sheets=doc.styleSheets; if (sheets.length) { var tSheet=sheets[sheets.length-1]; tSheet.insertRule(sel+"{"+dec+"}",tSheet.cssRules.length); } }; var ifr=document.getElementById('canvas_frame'); cssr(ifr.contentWindow.document, '.gs', 'font-family: Georgia'); })()

Bookmarklet is here: ujihisa. Drag it to your bookmark bar.

To extend it for ease,

(function(){
  function cssr(doc, sel, dec) {
    var sheets=doc.styleSheets;
    if (sheets.length) {
      var tSheet=sheets[sheets.length-1];
      tSheet.insertRule(sel+"{"+dec+"}",tSheet.cssRules.length);
    }
  };
  var ifr=document.getElementById('canvas_frame');
  cssr(ifr.contentWindow.document, '.gs', 'font-family: Georgia');
})()

This works perfectly. Use it and bless Hamachiya2!

before

before

after

after

1 comment:

  1. Hi there!

    Sounds great, but where do I have to insert this code?!

    Thanks in advance!
    Chip

    ReplyDelete

Followers