Change the Font Size of Web Pages in Safari for iOS with Bookmarklets

May 11, 2012 - 29 Comments

Change font size on Safari for iPad with bookmarklets

Everyone has run into a webpage where the font size is unbearably small on an iOS device, typically a reverse pinch gesture will make the text legible but on some pages that have a fixed width you then have to scroll sideways in addition to up and down. You can sort of get around that font size limitation by using the Reader feature on an iPhone or iPad, but that’s not ideal for every website either. This is precisely what two handy bookmarklets aim to resolve, by creating two fontsize increase and decrease buttons that can be accessed directly in Safari.

This addition is so useful that the concept should probably be included in future versions of Safari for iOS but only time will tell if that happens. In the meantime here’s what you need to do to get this working.

Repeat this process separately for both the increase and decrease functions:

  1. Open Safari on iPad or iPhone and create a bookmark for any page
  2. Tap the Bookmarks button at the top of the screen and choose “Edit”
  3. Edit the newly created bookmark, naming it either a minus (-) or plus (+) symbol and replace the URL by pasting in the appropriate javascript code shown below, depending on the desired function
  4. Save the bookmark change and load a new web page, tap on the + or – buttons to test font size changes live. Refreshing the page restores the font size to it’s default.

Decrease Font Size (-)

1
javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s-=2;p[i].style.fontSize=s+"px"}

Increase Font Size (+)

1
javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s+=2;p[i].style.fontSize=s+"px"}

These bookmarklet tweaks work by editing a bookmark URL and replacing it with a javascript that changes on page behavior, similar custom bookmarklets have allowed us to View Page Source in iOS Safari and even use Firebug on iOS.

This very handy solution comes from Marcos.Kirsch.com.mx, who recommends placing them in the Safari bookmarks bar for easy access.

Enjoy this tip? Subscribe to the OSXDaily newsletter to get more of our great Apple tips, tricks, and important news delivered to your inbox! Enter your email address below:

Related articles:

Posted by: Paul Horowitz in iPad, iPhone, Tips & Tricks

29 Comments

» Comments RSS Feed

  1. Romney says:

    Make sure to tap on “see original” to copy the proper text, pastebin gets in the way.

    • Paul says:

      Oops, fixed with inline code blocks. Thanks for pointing that out.

    • JulieTang says:

      I hate pages that default to Times New Roman. So I adapted the + – bookmarklets to change the font to something more readable. I also created another bookmarklet to change only the font.

      Create a bookmarklet called: Readable Font and save this in the address field

      javascript:var p=document.getElementsByTagName(‘*’);for(i=0;i<p.length;i++){p[i].style.fontFamily="Helvetica"}

      Create another bookmarklet called: Font –

      javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));p[i].style.fontFamily="Helvetica";}else{var s=12;}s-=2;p[i].style.fontSize=s+"px";p[i].style.fontFamily="Helvetica"}

      And finally create a bookmarklet called: Font +

      javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));p[i].style.fontFamily="Helvetica";}else{var s=12;}s+=2;p[i].style.fontSize=s+"px";p[i].style.fontFamily="Helvetica"}

      Enjoy

  2. Thanks for linking! Although I’d rather you redirected the traffic to my site instead of duplicating it here :/

    By the way, it’s http://Marcos.Kirsch.com.mx not kirsh.com.mx [sic].

    • Paul says:

      Sure thing! We typically like to walk through every step of a process so I included the boomarklet steps that you left out, thus the full walkthrough being placed here.

      The URL has been corrected, great tip BTW.

  3. BBL says:

    Great tip thanks… added to my bookmarklets list ^^

    just little suggestion for people like me who thinks it’s too small.. personally instead of – + I used F- and F+

    Here is a picture of the all useful bookmarklets I have now: http://goo.gl/qOAc0

  4. inknzvl says:

    Maravilloso Marcos, thanks! I just test it in this article’s small font size, it works perfect. Now I can see this is what “tap translate” application do. I added the bookmarklet as they tell you in the application and is the same process. Marcos I’m visiting your page now!

  5. KVSR says:

    It worked perfect. Also on Mac

  6. […] this simple workaround hack, however, that’s thankfully and conveniently no longer the case. Our friends at OS X Daily explain: 1. Open Safari on iPad or iPhone and create a bookmark for any page. 2. Tap the Bookmarks button […]

  7. […] quickly change the font size of any text.Font size bookmarklets [The Marcos Kirsch Experience via OS X Daily] […]

  8. gerelee says:

    there is no bookmarks bar in mobile safari on iphone … at least not one that’s visible. i do have a bookmarks bar folder but that’s it

  9. Joe says:

    In IOS6, pasting the code to a bookmark URL appears to work fine. Except it looks like IOS encodes the URL. This looks like there is no way to save the javAscript properly. Re-editing the URL does not display the same value pasted. Just a guess that would explain why the bookmark does not work for me.

    • Reginasan says:

      Joe, Copying this script in the isolated code box above in iOS also copies the line number followed by a space followed by javaScript… You will want to remove the “1” and the space either by pasting into a note first, then copying from the note without the leading characters “1 “… Or after pasting into the bookmark destination field, hold your finger over the type until the magnifier appears and “scrub” to the front of the code you just pasted, to delete the “1 “. The bookmarks DO get encoded into %20 for spaces (and lots of other characters) but this doesn’t break the URL as long as you get rid of the leading “1 ” or “1%20″. The altered code examples that appear in comments here do not have the same issue when copied since they do not have line numbers.

  10. henry says:

    fukin dumbass apple, how hard is it to let us zoom and render on a safari page like android does? some pages are so small not even landscape and take care of..!!! sigh.. multibillion company.. SMH!!!!!!!

  11. Chester says:

    Totally agree with Joe, it won’t work in iOS 6 on an iphone because it converts the javascript to the encoded format. End up with gibberish for the “}” and other symbols.

    • Reginasan says:

      Chester, I know this is an older post, but I recently ran into the same issue trying to make the bookmarks, and as replied to Joe’s post, the problem is the line number and space that gets copied with the script, and not the encoded characters… Safari will understand those characters, as long as you delete “1 ” from the front… Or “1%20″ if already encoded.

  12. Morphix says:

    I have iOS 5 on my iPad 1 and when I try the bokkmarkelt scrip I get an “invald address” window. Any thoughts?

  13. Morphix says:

    Does not work on my ipad. The url input into the bookmark changes to something else once you close the edit. I can’t believ that the most profitable company in the world can’t build this into their iPad browser! Truly idiotic.

  14. MishMish says:

    This font issue is particularly frustrating on the iPad mini, which obviously hadn’t been released when this was published. The above JavaScript works but, HA!, still screwed! The font on the bookmark bar is so tiny it’s impossible to select any bookmark without using a stylus. And I have small fingers. God help anyone with man hands…

    • Reginasan says:

      In addition to giving the bookmark a longer name than – or + as mentioned by others, you can also quickly show favorites (book icon to the left of the safari destination field), and tap the bookmark there if this bookmark is created as a favorite. You can move it to the top of favorites by tapping “edit” in the bottom right of the favorites side bar, sliding it up on the lines symbol right of the title) and the favorites/bookmark/reading list sidebar texts on the iPad DO at least get larger when you increase your preferred iOS font size in settings > display+brightness.

  15. […] Safari: On the iOS side of things you can use use these Safari bookmarklets to increase only the font and text sizes of web pages, without zooming everything as you would with […]

  16. mfripp says:

    Here are some updated versions of these scripts. If page elements inherit sizes from a style sheet or specify sizes in % or ems (fairly common), the “+” script above may actually reduce the font size before it starts increasing it. The scripts below give more predictable and correct results in these cases.

    I also realized that often all I want is to increase the smallest text to a readable size (e.g., 20 px on my iPhone 4s in iOS 8.1), without changing the headings. So I added a script that just zips through and makes sure everything is at least 20 px. I called this “at least 20″. You can change the behavior of this script by changing the minSize setting at the start.

    at least 20:
    javascript:var minSize=20;var p=document.getElementsByTagName(‘*’);var s=new Array(p.length);for(i=0;i<p.length;i++){st=document.defaultView.getComputedStyle(p[i]);if(st){s[i]=parseFloat(st.fontSize.replace("px",""))}}for(i=0;i<p.length;i++){if(s[i]!=undefined)p[i].style.fontSize=Math.max(minSize,s[i])+"px"}

    larger:
    javascript:var p=document.getElementsByTagName('*');var s=new Array(p.length);for(i=0;i<p.length;i++){st=document.defaultView.getComputedStyle(p[i]);if(st){s[i]=parseFloat(st.fontSize.replace("px",""))}}for(i=0;i<p.length;i++){if(s[i]!=undefined)p[i].style.fontSize=s[i]*1.1+"px"}

    smaller:
    javascript:var p=document.getElementsByTagName('*');var s=new Array(p.length);for(i=0;i<p.length;i++){st=document.defaultView.getComputedStyle(p[i]);if(st){s[i]=parseFloat(st.fontSize.replace("px",""))}}for(i=0;i<p.length;i++){if(s[i]!=undefined)p[i].style.fontSize=s[i]/1.1+"px"}

    • mfripp says:

      I forgot to mention — on iOS 7 and 8 (at least for iPhone), Safari has no bookmarks bar, so you have to put these bookmarklets in your Favorites bookmark folder (or wherever). If you drag them to the top of the list of Favorites, it’s still fairly easy to use them. Safari remembers the last bookmarks folder you used, so you just have to tap the bookmarks icon and then tap the bookmark you want to use.

  17. Jim Julian says:

    Hello,
    Thanks for the scripts.
    the reason for this message is a recent problem with Evernote’s bookmarklet. More and more, pages are detecting my iPhone and redirecting my browser to ‘mobile’ versions. There are obvious advantages to them but there are disadvantages as well. Some of the conent is usually stripped away.
    A more immediate disadvantage is the response if the Evernote app’s bookmarklet’s response. If a mobile page is up when the bookmarklet is used, the placard/card form that pops up is font size dependent. Almost always, the card is so large, only one quarter is visible. The card is not resizable or moveable. Do you have any suggestions I could use? I’ve already sent an email to Evernote with no response.

    Thank you,
    Jim Julian

Leave a Reply

 

Shop for Apple & Mac Deals on Amazon.com

Subscribe to OSXDaily

Subscribe to RSS Subscribe to Twitter Feed Follow on Facebook Subscribe to eMail Updates