Daily Archives: March 18, 2010

How to make drawings and diagrams have more detail in Google Docs

Ever made an intricate diagram in a Google Doc only to find it hopelessly pixellated when you print it?

It seems Google take the nice vector image you’ve created and render it as a 600 pixel wide bitmap. That’s always going to look bad in print.

After a document I was writing got bitten by this, I figured out a way to fix it. You do need a little familiarity with HTML, so here goes:

1. Go to Edit -> Edit HTML

2. Find the img tag which corresponds to the image you want to modify, it will look like this:

<img src=”http://docs.google.com/a/drawings/yourdomain.com/image?id=s08e-HCOucm1vs2N4yDwx6g&w=600&h=600&rev=710&ac=1″>

3. That URL can be modified to return an image wider than 600px with more detail in it. So triple it and set the w and h parameters to 1800

<img src=”http://docs.google.com/a/drawings/yourdomain.com/image?id=s08e-HCOucm1vs2N4yDwx6g&w=1800&h=1800&rev=710&ac=1″>

Now this image would be too big for the page, so we add a width=”600″ attribute so that Google docs makes it fit the page width

<img width=”600″ src=”http://docs.google.com/a/drawings/yourdomain.com/image?id=s08e-HCOucm1vs2N4yDwx6g&w=1800&h=1800&rev=710&ac=1″>

4. Job done! You should see the improvement on screen and in print!