Text resolution in HTML export

Sorry, I am very new to exporting to HTML. I am in the process of exporting a range of diagrams. I have managed to get the export to work very easily including all the links between the diagrams. The only problem is the text resolution as it renders looking a bit “out of focus”. I am using Helvetica in a range of 10 -16 point for the diagram, perhaps there is a better font I could use?

I have managed to improve the focus by increasing the resolution in the export menu, but then it renders the diagrams too large to view, even on a large screen.

If anyone has any advice about this I would be very grateful.

Many thanks in advance

Tony

Welcome to the wonderful, weird world of OmniGraffle.

More, later.

Yes. According to the Apple Style Guide 1984 (no longer available), headings should be a sans serif font (eg. Helvetica), and the body of text should be a serif font (eg. Times). That is consistent with 2,400 years of Western Civilisation style. It is because the serifs ease the eye in reading, as it links one letter to the next.

Note that the common style today is the opposite. Supposed to look good, but definitely harder to read.

I use OG 5 exclusively, so I will explain things in terms of that version: I trust that you can find the same options in the later releases, possibly in a different location or menu or dialogue. Likewise, I will give settings that are relevant to my work, you need to work out settings that are relevant to yours. Yes, it is a bit of trial-and-error, hopefully less so after this post.

OmniGraffle 5.4.4 Export Dialogue

HTML Image Type

I use PNG because it is the easiest and smallest of the three, and page load speed is important to me (a metric used by SEO and page crawlers). That means, keep the file size under 1 mb. The file size for JPG and TIFF are understandably larger.

  • I would much prefer vector graphics … but PDF is not an option in the HTML Image Type menu, and SVG does not work in OG 5 (fails to embed my embedded graphics and fails on object labels).

Canvas

The Canvas is A4 (European standard, roughly equivalent to US 8.5x11), scaled to 90%, landscape. I want the Browser Display size to be equivalent to A4 landscape.

  • Note, the example diagram is dense, it is the final lecture note or memory tag, not the series of lecture slides.

Browser Display Size

This is a function of both Scale and Bitmap Resolution. Eg. these two settings produce exactly the same Browser Display size, as well as the file size:

  • 25% x 256 dots per cm = 991 kb
  • 50% x 128 dots per cm = 991 kb

This is my setting:

  • 20% x 256 dots per cm = 735 kb
  • Example: perfect for me, in both size and resolution (no fuzziness when zoomed in)

This setting produces a Browser Display size that is approximately half the above:

  • 25% x 128 dots per cm = 387 kb
  • Example: too small for me. Test only (don’t try the links).

In any case, the Browser Display can be zoomed in/out via {^|⌘}+ and {^|⌘}-. What we really want is, no fuzziness at reasonable, not the largest, display size.

SVG

Vector graphics in a form intended for browsers (as opposed to HTML Image Map), is definitely the better Export option, if you have OG 6 or 7. Hopefully it works better than it does in OG 5 in general, but from the postings in this forum, it may be buggy.

Cheers