Jump to content

Cache page HTML inserts arbitrary line breaks in long strings of HTML tags


shell1fish

Recommended Posts

On several of my cache pages, I have some minimal HTML code. I recently noticed that in the Long Description, GC.com automatically reformats some code, inserting line breaks when a string of tags becomes too long. My example is taken from this cache (GC15QKJ).

 

I'll copy and paste the following into the Long Description box:

This cache is part of a series of caches highlighting places
that have excellent <font color="green">C</font><font color="red">h</font><font color="green">r</font><font color="red">i</font><font color="green">s</font><font color="red">t</font><font color="green">m</font><font color="red">a</font><font color="green">s</font>

<font color="red">l</font><font color="green">i</font><font color="red">g</font><font color="green">h</font><font color="red">t</font>

<font color="green">d</font><font color="red">i</font><font color="green">s</font><font color="red">p</font><font color="green">l</font><font color="red">a</font><font color="green">y</font><font color="red">s</font>.

After clicking on the Submit button, the code is reformatted and looks like this:

This cache is part of a series of caches highlighting places that have excellent
<font color="green">C</font><font color="red">h</font><font color="green">
r</font><font color="red">i</font><font color="green">s</font><font color="red">
t</font><font color="green">m</font><font color="red">a</font><font color="green">
s</font>
<font color="red">l</font><font color="green">i</font><font color="red">
g</font><font color="green">h</font><font color="red">t</font>
<font color="green">d</font><font color="red">i</font><font color="green">
s</font><font color="red">p</font><font color="green">l</font><font color="red">
a</font><font color="green">y</font><font color="red">s</font>.

which results in the text on my cache page having extra spaces between letters:

This cache is part of a series of caches highlighting places that have excellent Ch ris tma s li ght di spl ays.

When I first created this series of caches last fall, I know that the same HTML code was shown correctly on the cache page. Unfortunately, I don't visit my own cache pages often enough to be able to pinpoint which GC.com site update "broke" my code.

 

Is this a "bug" or a "feature"? Is there a workaround until/if it gets fixed? Thanks so much for any input!

Link to comment

White space on your cache page is not going to display the same way as you see it when you edit it.

 

To get new lines you have to use the HTML line break character <br>.

To have actual spaces or multiple spaces you have to use multiple  

 

here's a good reference I just googled.

http://www.w3.org/TR/REC-html40/struct/text.html

 

you can work around your problem by putting things on different lines so that the lines do not end with things like green">

for example

<font color="green">C</font>
<font color="red">h</font>
<font color="green">r</font>
<font color="red">i</font>
<font color="green">s</font>
<font color="red">t</font>
<font color="green">m</font>
<font color="red">a</font>
<font color="green">s</font> 
<font color="red">l</font>
<font color="green">i</font>
<font color="red">g</font>
<font color="green">h</font>
<font color="red">t </font>      <-notice this space here, it may not work so perhaps do   like above.
<font color="green">d</font>
<font color="red">i</font>
<font color="green">s</font>
<font color="red">p</font>
<font color="green">l</font>
<font color="red">a</font>
<font color="green">y</font>
<font color="red">s</font>.

 

all these apparently extra carriage returns are ignored by HTML processors since they are not <br> 's or <p> and </p> 's

Edited by trainlove
Link to comment

Hi trainlove,

Thanks for the reply.

you can work around your problem by putting things on different lines so that the lines do not end with things like green">

for example

<font color="green">C</font>
<font color="red">h</font>
<font color="green">r</font>
<font color="red">i</font>
<font color="green">s</font>
<font color="red">t</font>
<font color="green">m</font>
<font color="red">a</font>
<font color="green">s</font>
<font color="red">l</font>
<font color="green">i</font>
<font color="red">g</font>
<font color="green">h</font>
<font color="red">t</font>
<font color="green">d</font>
<font color="red">i</font>
<font color="green">s</font>
<font color="red">p</font>
<font color="green">l</font>
<font color="red">a</font>
<font color="green">y</font>
<font color="red">s</font>.

all these apparently extra charriage returns are ignored by HTML processors since they are not <br> 's.

When I try this, however, the site translates each extra carriage return as a single space, and the cache page ends up looking like this:

This cache is part of a series of caches highlighting places that have excellent C h r i s t m a s l i g h t d i s p l a y s.
Link to comment

You need to enter a non-breaking space command, which is written as

 

 

 

So, it would look like this:

 

<font color="green">C</font><font color="red">
h </font><font color="green">r </font><font
color="red">i </font><font color="green">s
</font><font color="red">t </font><font
color="green">m </font><font color="red">a
</font><font color="green">s</font>  <font
color="red">l </font><font color="green">i
</font><font color="red">g </font><font
color="green">h </font><font color="red">t
 </font><font color="green">d </font><font
color="red">i </font><font color="green">s
</font><font color="red">p </font><font
color="green">l </font><font color="red">a
</font><font color="green">y </font><font
color="red">s</font><br />

 

Edit to say that if the code is written that way, it will display C h r i s t m a s and so on with a single space between them and then 2 spaces between the words. If you want a third space, enter another of the non breaking space commands.

Edited by Skippermark
Link to comment

I didn't really like how that was coded, so I re-wrote it and cleaned it up a bit. The font command is kind of becoming outdated.

 

<span style="color: green;">C</span> <span
style="color: red;">h</span> <span
style="color: green;">r</span> <span
style="color: red;">i</span> <span
style="color: green;">s</span> <span
style="color: red;">t</span> <span
style="color: green;">m</span> <span
style="color: red;">a</span> <span
style="color: green;">s</span>  <span
style="color: red;">l</span> <span
style="color: green;">i</span> <span
style="color: red;">g</span> <span
style="color: green;">h</span> <span
style="color: red;">t</span>  <span
style="color: green;">d</span> <span
style="color: red;">i</span> <span
style="color: green;">s</span> <span
style="color: red;">p</span> <span
style="color: green;">l</span> <span
style="color: red;">a</span> <span
style="color: green;">y</span> <span
style="color: red;">s</span>

Edited by Skippermark
Link to comment

Thanks!

 

I'd eventually like it to show up "correctly" as:

Christmas light displays
but I'll take what I can get in the meantime.

 

(And thanks for the CSS style attributes, Skippermark; you'll see I did the ultimate faux pas of mixing and matching my HTML code by having the second appearance of the colored words further down on the cache page already using the same code you presented; I'm in the process of switching it over, but since it didn't fix my "extra spaces" problem, I haven't finished that yet.)

Link to comment

I think this will do the trick.

 

<span style="color: green;">C</span><span
style="color: red;">h</span><span
style="color: green;">r</span><span
style="color: red;">i</span><span
style="color: green;">s</span><span
style="color: red;">t</span><span
style="color: green;">m</span><span
style="color: red;">a</span><span
style="color: green;">s</span> <span
style="color: red;">l</span><span
style="color: green;">i</span><span
style="color: red;">g</span><span
style="color: green;">h</span><span
style="color: red;">t</span> <span
style="color: green;">d</span><span
style="color: red;">i</span><span
style="color: green;">s</span><span
style="color: red;">p</span><span
style="color: green;">l</span><span
style="color: red;">a</span><span
style="color: green;">y</span><span
style="color: red;">s</span>

Link to comment

Unfortunately, when I copy and paste that code, GC.com automatically reformats it to be:

<span style="color: green;">C</span><span style="color: red;">h</span><span style="color: green;">
r</span><span style="color: red;">i</span><span style="color: green;">
s</span><span style="color: red;">t</span><span style="color: green;">
m</span><span style="color: red;">a</span><span style="color: green;">
s</span>
<span style="color: red;">l</span><span style="color: green;">i</span><span style="color: red;">
g</span><span style="color: green;">h</span><span style="color: red;">
t</span>
<span style="color: green;">d</span><span style="color: red;">i</span><span style="color: green;">
s</span><span style="color: red;">p</span><span style="color: green;">
l</span><span style="color: red;">a</span><span style="color: green;">
y</span><span style="color: red;">s</span>

inserting the same arbitrary carriage returns, resulting in the same extra spaces I pointed out in my first post.

 

I can't help but think of it as an actual bug in the way that GC.com processes long strings of HTML tags.

Link to comment
Did it work with the other example when there was an additional space between the characters?

Yes, the code for having a space between every letter did work as expected, including the non-breaking two or three spaces between the words.

 

... can you manually edit the description and remove the extra spaces, or does it put them back?

If I remove the excess carriage returns, it does put them right back as soon as I click on "Submit Changes" (in either Firefox or Internet Explorer, on a PC.) Edited by shell1fish
Link to comment

What if you get rid of all the carriage returns in the code except between the words and put the HTML all one one line, one line per work like:

 

<span style="color: green;">C</span><span style="color: red;">h</span><span style="color: green;">r</span><span style="color: red;">i</span><span style="color: green;">s</span><span style="color: red;">t</span><span style="color: green;">m</span><span style="color: red;">a</span><span style="color: green;">s</span>
<span style="color: red;">l</span><span style="color: green;">i</span><span style="color: red;">g</span><span style="color: green;">h</span><span style="color: red;">t</span>
<span style="color: green;">d</span><span style="color: red;">i</span><span style="color: green;">s</span><span style="color: red;">p</span><span style="color: green;">l</span><span style="color: red;">a</span><span style="color: green;">y</span><span style="color: red;">s</span>

 

I'm not sure if this will word wrap when displayed, but basically, I got rid of the extra return between the word span and style. I can email you the code directly if you'd like if it's not displaying quite right here.

Link to comment

Nope, still doesn't work. Thanks so much for bending over backwards trying to help! I had already tried that, as well as getting my web developer buddy to look over the code before I posted the original topic. I'll be more than happy to keep trying whatever, but nothing has worked so far.

 

Does anyone have an unpublished or archived cache that they could try to reproduce (or not) this "bug" on?

Link to comment

Nope, still doesn't work. Thanks so much for bending over backwards trying to help! I had already tried that, as well as getting my web developer buddy to look over the code before I posted the original topic. I'll be more than happy to keep trying whatever, but nothing has worked so far.

 

Does anyone have an unpublished or archived cache that they could try to reproduce (or not) this "bug" on?

 

A working workaround:

<span style="color: green;">C</span><!-- Bo
gus --><span style="color: red;">h</span><!-- Bo
gus --><span style="color: green;">r</span><!-- Bo
gus --><span style="color: red;">i</span><!-- Bo
gus --><span style="color: green;">s</span><!-- Bo
gus --><span style="color: red;">t</span><!-- Bo
gus --><span style="color: green;">m</span><!-- Bo
gus --><span style="color: red;">a</span><!-- Bo
gus --><span style="color: green;">s</span><!-- Bo
gus --><span style="color: red;">l</span><!-- Bo
gus --><span style="color: green;">i</span><!-- Bo
gus --><span style="color: red;">g</span><!-- Bo
gus --><span style="color: green;">h</span><!-- Bo
gus --><span style="color: red;">t</span><!-- Bo
gus --><span style="color: green;">d</span><!-- Bo
gus --><span style="color: red;">i</span><!-- Bo
gus --><span style="color: green;">s</span><!-- Bo
gus --><span style="color: red;">p</span><!-- Bo
gus --><span style="color: green;">l</span><!-- Bo
gus --><span style="color: red;">a</span><!-- Bo
gus --><span style="color: green;">y</span><!-- Bo
gus --><span style="color: red;">s</span>

 

Hope I didn't spoil too many mystery caches with this post? :P

Link to comment
A working workaround:

<span style="color: green;">C</span><!-- Bo
gus --><span style="color: red;">h</span><!-- Bo
gus --><span style="color: green;">r</span><!-- Bo
gus --><span style="color: red;">i</span><!-- Bo
gus --><span style="color: green;">s</span><!-- Bo
gus --><span style="color: red;">t</span><!-- Bo
gus --><span style="color: green;">m</span><!-- Bo
gus --><span style="color: red;">a</span><!-- Bo
gus --><span style="color: green;">s</span><!-- Bo
gus --><span style="color: red;">l</span><!-- Bo
gus --><span style="color: green;">i</span><!-- Bo
gus --><span style="color: red;">g</span><!-- Bo
gus --><span style="color: green;">h</span><!-- Bo
gus --><span style="color: red;">t</span><!-- Bo
gus --><span style="color: green;">d</span><!-- Bo
gus --><span style="color: red;">i</span><!-- Bo
gus --><span style="color: green;">s</span><!-- Bo
gus --><span style="color: red;">p</span><!-- Bo
gus --><span style="color: green;">l</span><!-- Bo
gus --><span style="color: red;">a</span><!-- Bo
gus --><span style="color: green;">y</span><!-- Bo
gus --><span style="color: red;">s</span>

Thanks for a workaround until they fix the bug. Once I put back the wanted spaces between words, it does indeed show up correctly on my cache page :)
Link to comment

You should be able to put a single space between letters such as follows quite abbreviatedly.

 

>S </span>

or

> L</span>

 

Those characters between the > and < are basically the text of your page. But if you want more than a single space you have to use that   character over and over.

 

And it appears that htmlTidy is quite the untidy thing that everyone thought it was.

Edited by trainlove
Link to comment
And it appears that htmlTidy is quite the untidy thing that everyone thought it was.

htmlTidy is not doing this. It looks as though the site is using some stupid word-wrapping algorithm to make the lines a uniform length and it just doesn't work properly.

 

The bizarre wrapping has annoyed me frequently in the past. Also, I believe it still won't do Unicode characters. Neither of those is from Tidy.

Link to comment

And it appears that htmlTidy is quite the untidy thing that everyone thought it was.

 

Good to see that some of you got the right intention of what I meant by that sentence.

I wanted to say:

And it appears that htmlTidy is not the tidy thing that everyone thought it was.

or:

And it appears that htmlTidy is quite the untidy thing that everyone didn't think it was.

or:

And it appears that htmlTidy is quite the untidy thing that everyone didn't expect it to be.

but I was hurried to get out the post.

 

P.S. I've copied and pasted the text of some of the contents of those codebox's into a text document and there do not appear to be spaces at the end of some of those lines, but if you just select them it does look like there are spaces there. Very strange, and probably why this algorithm is broken.

Link to comment
Guest
This topic is now closed to further replies.
×
×
  • Create New...