Change font and image size without changing original CSS

Question

How can I scale the size of all the text and images on a webpage by some amount when I can't make changes to the CSS of the website, only additions?

I want to scale text by 200% and all img-elements by 150%. I can execute JavaScript and add new CSS with it, but I can't change the content that the webserver gives me. The JavaScript should be short, so I can't replace all the original CSS with my own and in any case this should work with multiple sites.

The browser that I have doesn't include this kind of zoom feature. Which JavaScript snippet would accomplish this?

Edit:

jQuery seems like the way to go, the remaining problem is adjusting CSS for all text nodes without cumulatively scaling inner text nodes. Here's the JavaScript that I have now in a bookmerklet:

javascript:
(function(){
  var d=document;
  var h=d.getElementsByTagName("head")[0];
  var b=d.getElementsByTagName("body")[0];
  var s=d.createElement("style");
  s.appendChild(document.createTextNode('@media screen and (orientation: landscape) {\n'+'@-ms-viewport {\n'+'width: 800px;\n'+'}\n'+'}\n'+'@media screen and (orientation: portrait) {\n'+'@-ms-viewport {\n'+'width: 1000px;\n'+'}\n'+'}\n'+'html {\n'+'-ms-text-size-adjust:none;\n'+'}'));
  h.appendChild(s);
  var j=d.createElement("script");
  j.type='text/javascript';
  j.src='http://code.jquery.com/jquery-2.0.0.js';
  b.appendChild(j);
eval('$("*").each(function(){'+
'if($(this).text()!=""){'+
'fontSize=parseInt($(this).css("font-size"))*2;'+
'$(this).css("font-size",fontSize);'+
'}'+
'});');
eval('$("img").each(function(){'+
'imageWidth=this.width*2.5;'+
'$(this).css("width",imageWidth);'+
'});');`enter code here`
}
)()

I'm using Bookmarklet Builder to develop the solution: http://subsimple.com/bookmarklets/jsbuilder.htm

As this would apparently be needed for a user, or users, of a specific browser, you should identity the browser. The ways to manipulate style properties tends to be browser-dependent. — Jukka K. Korpela, May 29 '13 at 10:01
I'm testing the solutions using IE10 desktop version. I'm using Microsoft-specific -ms-viewport CSS attribute to constrain the viewport size but expect the CSS and JavaScript shouldn't need any other vendor-specific changes. I don't need backwards-compatibility with earlier IE versions. — Timo Kinnunen, Jun 18 '13 at 09:18

score 0 · Answer 1 · answered May 29 '13 at 09:28

0

If you can add new CSS, then define there class f.e. "big". Define .big p, .big div, .big img etc. as you need. Than you can via javascript add this class to body element.

Look at this example I wrote:

<html><head><title>Example</title>
<style>
/* this is basic definition */ 
body {
  font-size:20px;
}

/* this is definition you will add in your css */
.big {
  font-size:200%;
}
</style>

<script>
function change(x) {
  document.body.className=x?"big":"";
}
</script>
</head>
<body>
<div>Blablablabla</div>
<input type="button" onclick="change(1);" value="Zoom">
<input type="button" onclick="change(0);" value="Unzoom">
</body></html>

answered May 29 '13 at 09:28

Michal Politzer

313
3
9

This didn't work. I modified this into a bookmarklet and tried it on this webpage. Although the body's class attribute changes between empty and "big", the size of the text on this page doesn't change to 200%. – Timo Kinnunen Jun 18 '13 at 09:14
I used Bookmarklet Builder and the code is here [link](http://closure-compiler.appspot.com/code/jsc9a899c2e54ab15801957b56b76102704/default.js) – Timo Kinnunen Jun 18 '13 at 09:23

Alex · Answer 2 · 2013-05-29T10:03:39.033

0

Bit late, but you could use jQuery:

$('#scaled *').each(function(){
  if ($(this).text() != '') 
      fontSize = parseInt($(this).css("font-size")) * 2 //incease by 100%;
      $(this).css('font-size',fontSize);
});

$('#scaled img').each(function(){ 
    imageWidth = this.width * 2.5; //incease by 150%
    $(this).css('width',imageWidth);
})

I've illustrated my answer in a fiddle - http://jsfiddle.net/kA6fm/2/

edited May 29 '13 at 10:03

answered May 29 '13 at 09:37

Alex

8,875
2
27
44

Setting font size to 200% does not double the font size that the element currently has. Instead, it makes the font size two times the font size of the parent element. When elements are nested (and they usually are), the cumulative effect will be gross. – Jukka K. Korpela May 29 '13 at 09:59
@Jukka K. Korpela - Good point! I had over looked that, I'd updated my answer. – Alex May 29 '13 at 10:04
Changing images using jQuery works so jQuery seems like the way to go. Scaling text however gets the whole page blown to vast proportions using this code. I'll edit my question to include where I'm at with jQuery. – Timo Kinnunen Jun 18 '13 at 10:21

Change font and image size without changing original CSS

2 Answers2