Gizmo's Freeware Forum

Gizmo's Freeware Forum (https://www.techsupportalert.com/freeware-forum/)
-   Internet, Web Apps and Networking (https://www.techsupportalert.com/freeware-forum/internet-web-apps-and-networking/)
-   -   Any good tips on HTML table rendering, diagrams, etc (https://www.techsupportalert.com/freeware-forum/internet-web-apps-and-networking/13969-any-good-tips-on-html-table-rendering-diagrams-etc.html)

Remah 04. Aug 2014 07:48 AM

Any good tips on HTML table rendering, diagrams, etc
 
I've been reading articles on speeding up web page rendering particularly related to HTML tables and image optimization. This old article Load Time Tip: Speed Up Those Tables is one of the simplest about tables.

Has anyone seen anything describing the differences creating simple line drawings using HTML tables or with, say, .PNG images from a drawing program. So my question is, if I have a simple diagram with boxes joined by vertical or horizontal lines, will my web page render faster if I use an HTML table to produce it instead of inserting an image? I'm assuming it would but I don't know if anybody has ever tried to test it.

The size of the table code would usually be a lot less than an image size. But what if they're the same and the HTML code is the same number of bytes as the image file. Which would be faster the table render or the image display? I'm assuming the table would be faster.

Jojo Yee 04. Aug 2014 10:05 AM

Comparing a table containing text with an image containing the same text info, a table html code is definitely a much better choice than an image. Beside the advantage of a table which is much lighter to load than an image in a browser, there're other factors to consider as well:

1. Text inside a table is searchable by a search engine, or by users pressing Ctrl-F, but an image is not without the OCR.
2. A table does not adds an http call but an image does, which increases pageload time.

Remah 04. Aug 2014 10:46 AM

Thanks, Jojo. I hadn't considered searching which is very important. :D

Creating the tables is a lot slower than drawing diagrams. :(

Remah 07. Aug 2014 07:02 AM

I've now been creating diagrams using tables but there are some frustrations because I'm no HTML/CSS expert.

How do I override the CSS styles so I don't have to rely on deprecated HTML?

Preview keeps converting my arrows into question marks!?
It doesn't change
← ← ← ← ← ←
↑ ↑ ↑ ↑ ↑
→ → → → → →
↓ ↓ ↓ ↓ ↓ ↓ ↓
But it does change:
↖ ↖ ↖ ↖
↗ ↗ ↗ ↗
↘ ↘ ↘ ↘
↙ ↙ ↙ ↙ ↙ ↙

Jojo Yee 07. Aug 2014 11:05 AM

Quote:

Originally Posted by Remah (Post 102184)
Preview keeps converting my arrows into question marks!?

When I go to this article, the arrow signs show up correctly, same as in preview. So I can't see what went wrong.

Remah 07. Aug 2014 09:37 PM

Quote:

Originally Posted by Jojo Yee (Post 102185)
When I go to this article, the arrow signs show up correctly, same as in preview. So I can't see what went wrong.

I've found the problem, it wasn't preview. It just happened that it coincided with previewing. The problem is with Notepad++ defaulting to the ANSI character set.

The editor here converts many of the codes to the actual character. So if I type in HTML ↘ (lower left arrow) it will be converted to the arrow character whereas if I type in ↓ (down arrow) it remains as an HTML entity code. When I copy the article HTML to Notepad++ to edit it, Notepad++ doesn't recognize the converted character (because I have ANSI encoding which is the default for Notepad++) and replaces it with a question mark.

So I set Notepad++ to UTF-8. Even so it still won't take the converted characters when copied using the Windows clipboard. Notepad, Office and other programs will all take it but for some reason Notepad++ doesn't. I set the default global font to Courier New but it made no difference.

I tried out PSPad in the meantime but dumped it because it won't wordwrap to the width of the window instead you have to specify a fixed value (the default is 80 chars). That might be OK for programming but this is a deal breaker for our articles where there are lots of long paragraphs.

Jojo Yee 08. Aug 2014 03:19 AM

Quote:

Originally Posted by Remah (Post 102200)
So I set Notepad++ to UTF-8. Even so it still won't take the converted characters when copied using the Windows clipboard.

I'm using Notepad++ with the latest version 6.6.8. It appears fine to me and takes the characters converted from the html codes for special characters. The encoding in Notepad++ is set to UTF-8.

Remah 08. Aug 2014 05:45 AM

1 Attachment(s)
Quote:

Originally Posted by Jojo Yee (Post 102205)
I'm using Notepad++ with the latest version 6.6.8. It appears fine to me and takes the characters converted from the html codes for special characters. The encoding in Notepad++ is set to UTF-8.

I've upgraded to the same version.

See the example where I've copied the editor text and pasted it into Notepad++. The encoding is UTF-8 but Notepad++ displays a box. The style for global override is set to Courier New. In Consolas it is a question mark inside a box.

Notepad++ retains the correct character code because I can copy the Notepad++ text back to the editor and it appears correctly. If I copy in characters 8591 to 8600 then the horizontal and vertical arrow (8591-8195) display correctly but the angled arrows (8596-8600) do not.

I'll have another look at the problem when I get time.

Jojo Yee 08. Aug 2014 09:57 AM

Quote:

Originally Posted by Remah (Post 102206)
See the example where I've copied the editor text and pasted it into Notepad++. The encoding is UTF-8 but Notepad++ displays a box. The style for global override is set to Courier New. In Consolas it is a question mark inside a box.

It's weird because I have the same settings with no issue.

Remah 08. Aug 2014 11:59 AM

I thought it might be a browser issue but the same problem occurs between Word, which works fine, and Notepad/Notepad++.

I'm on Windows 8.1 which I think you are on too. I did back out the 8.1 roll-up update because it wrecked my Skydrive syncing so will have to check that out too.


All times are GMT +1. The time now is 09:21 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2020, vBulletin Solutions, Inc.