Gizmos Freeware Reviews  

Go Back   Gizmo's Freeware Forum > Debating Chamber > Internet, Web Apps and Networking

Reply
 
Thread Tools Display Modes
Old 04. Aug 2014, 07:48 AM   #1 (permalink)
Senior Member
 
Join Date: Jul 2010
Location: New Zealand
Posts: 1,741
Question 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.
__________________
Better to light a candle ... than to curse the darkness.
Remah is offline   Reply With Quote
Old 04. Aug 2014, 10:05 AM   #2 (permalink)
Maestro di Search
 
Jojo Yee's Avatar
 
Join Date: Jul 2008
Posts: 7,843
Default

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.
Jojo Yee is offline   Reply With Quote
Old 04. Aug 2014, 10:46 AM   #3 (permalink)
Senior Member
 
Join Date: Jul 2010
Location: New Zealand
Posts: 1,741
Default

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

Creating the tables is a lot slower than drawing diagrams.
__________________
Better to light a candle ... than to curse the darkness.
Remah is offline   Reply With Quote
Old 07. Aug 2014, 07:02 AM   #4 (permalink)
Senior Member
 
Join Date: Jul 2010
Location: New Zealand
Posts: 1,741
Default

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:
↖ ↖ ↖ ↖
↗ ↗ ↗ ↗
↘ ↘ ↘ ↘
↙ ↙ ↙ ↙ ↙ ↙
__________________
Better to light a candle ... than to curse the darkness.
Remah is offline   Reply With Quote
Old 07. Aug 2014, 11:05 AM   #5 (permalink)
Maestro di Search
 
Jojo Yee's Avatar
 
Join Date: Jul 2008
Posts: 7,843
Default

Quote:
Originally Posted by Remah View Post
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.
Jojo Yee is offline   Reply With Quote
Old 07. Aug 2014, 09:37 PM   #6 (permalink)
Senior Member
 
Join Date: Jul 2010
Location: New Zealand
Posts: 1,741
Default

Quote:
Originally Posted by Jojo Yee View Post
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.
__________________
Better to light a candle ... than to curse the darkness.

Last edited by Remah; 07. Aug 2014 at 09:38 PM. Reason: Typos
Remah is offline   Reply With Quote
Old 08. Aug 2014, 03:19 AM   #7 (permalink)
Maestro di Search
 
Jojo Yee's Avatar
 
Join Date: Jul 2008
Posts: 7,843
Default

Quote:
Originally Posted by Remah View Post
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.
Jojo Yee is offline   Reply With Quote
Old 08. Aug 2014, 05:45 AM   #8 (permalink)
Senior Member
 
Join Date: Jul 2010
Location: New Zealand
Posts: 1,741
Default

Quote:
Originally Posted by Jojo Yee View Post
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.
Attached Images
File Type: png htmlentitycopy.png (7.9 KB, 5 views)
__________________
Better to light a candle ... than to curse the darkness.
Remah is offline   Reply With Quote
Old 08. Aug 2014, 09:57 AM   #9 (permalink)
Maestro di Search
 
Jojo Yee's Avatar
 
Join Date: Jul 2008
Posts: 7,843
Default

Quote:
Originally Posted by Remah View Post
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.
Jojo Yee is offline   Reply With Quote
Old 08. Aug 2014, 11:59 AM   #10 (permalink)
Senior Member
 
Join Date: Jul 2010
Location: New Zealand
Posts: 1,741
Default

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.
__________________
Better to light a candle ... than to curse the darkness.
Remah is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



All times are GMT +1. The time now is 08:49 PM.


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