End of Line

Okay Mr. Hyatt, why does Safari (1.2.1 v125.1) insist on adding a space between the last character of a link and the following punctuation mark? All over this site, exclamation points drop to the next line and unsightly spaces appear between commas and periods and the preceding links. Can somebody explain this? Anybody?

Is it simply because I chose to save my eyes and forbade OS X from antialiasing typefaces 12px and below? … Nope, just checked, apparently not. The space is actually being generated. Yes, you can copy the link and the punctuation that follows—and when you paste it into another application the space remains. But view source and there’s nothing there. Am I doing something wrong? Semantically, the punctuation is completely separate from contents of the link. Right?

<span style="voice-family: 'Whiny nihilist with nine-toed girlfriend'">It’s not fair.</span>

Previous
Threadmost
Next
Standards Within Standards
Author
Shaun Inman
Posted
April 7th, 2004 at 8:48 pm
Categories
The Site
Apple
JavaScript
Web
Comments
024 (Now closed)

024 Comments

001

Yeah, I realize my movie references are all over the place in this post. What do you want from me? I’m sick :P

Author
Shaun Inman
Posted
Apr 7th, 2004 5:30 pm
002

Hey, keep quiet. When the whole extra space before punctuation thing catches on you can say how wicked old-skool you were.

Like, Totally                             !

Author
Jason Santa Maria
Posted
Apr 7th, 2004 5:40 pm
003

I don’t always have that problem in Safari, but I do get it whenever I run my text trough the php functions that add in hyperlinks to certian keywords on the site. Since I do this on the front page only, I get spaces there but not in my archived pages.

Author
Tyson Tune
Posted
Apr 8th, 2004 5:56 am
004

Wow - I’ve never seen you lose control like this!

You should lay into Mozilla not loading my external swfs, dammit!

Author
Bearskinrug
Posted
Apr 8th, 2004 10:44 am
005

Oh, I’ve got a bone to pick with Mozilla too. About replaced content retaining the previous elements margin attributes—which causes a problem if the new element has its own margins defined for it. That’s the main thing keeping me from publishing an article on a revised version of my Flash image replacement…

Author
Shaun Inman
Posted
Apr 8th, 2004 10:54 am
006

OK, I’ve been through doing a trial-and-error elimination process, and have isolated the problem…

The culprit is in the file si.js, the function SI_flashHeadlines(). Basically, if you take out the lines that set the innerHTHL properties, the problem goes away.

So, it looks like by altering the innerHTML value in script, the spaces are added in. Now you know what it is, you can submit it as a bug…

Author
Seb Duggan
Posted
Apr 8th, 2004 12:09 pm
007

Right on, Seb. Report submitted. It looks like it only affects links that are in the same container as the modified innerHTML because if you look at the “Markdown” link in the comment area there’s no space between it and the period that follows.

Now what are the chances such an obscure bug gets fixed anytime soon?

Author
Shaun Inman
Posted
Apr 8th, 2004 12:16 pm
008

I wonder how long until the web will truly be ready for modern web design?

You know, now, Safari and Firefox are at the top of the CSS displaying, but they still have their slight problems which can create ticks for people. How far are we off until we can create one style sheet sans-hacks for all browsers?

Author
Danny Cohen
Posted
Apr 9th, 2004 10:07 am
009

What I’m still marveled by is how you are able to use fonts that are not installed locally. I’ve looked through all the CSS and JS… I’ve read a few articles about how to achieve such, but it’d be best to hear it from you ;)

Author
Christoph
Posted
Apr 12th, 2004 4:30 pm
010

I know Christoph (and everyone else who’s emailing with the same sentiment), I’m sorry. There are some issues with the existing technique that limit its usefulness in production environments. I’m trying to iron those out. Unfortunately this revision is producing some unexpected behavior in the Moz family.

Author
Shaun Inman
Posted
Apr 12th, 2004 4:35 pm
011

It took me forever to figure out how SI did those custom fonts. It’s really quite an interesting idea, though I hate using JavaScript for anything.

Author
John Whittet
Posted
Apr 12th, 2004 6:00 pm
012

Phhhhffffttt. Personally, I would like to know how Netscape 4 feels about this…

Author
Jason Santa Maria
Posted
Apr 12th, 2004 6:08 pm
013

Well, Shaun never really did care much for me. In fact, one time I was just sitting there, rendering some tables and minding my own business. I stall out for ONE second, and he just ups and force quits me! I mean, can you believe that?!? I was all like, “oh no you didn’”. But it was too late. I couldn’t even fight back with that dialogue box… you know, the one with the bomb and the restart button that actually freezes the computer when you click on it. Well, that’s neither here nor there… it was a long time ago. This new Flash replacement scheme he’s cooked up is just fuel on the fire. It hurts my feelings to admit it, but I doubt Shaun and I will ever really be friends again.

Author
Netscape 4
Posted
Apr 12th, 2004 6:08 pm
014

OMG Jason!!1! You’re letting NS crash at your place?

Oh…you’re not? OMG!111!! Why would you lie about something like that?!! I can see you both posting from the same IP address!!

Some people have no standards. You are so going down at next years webmaster/log picnic.

With or without ShortStat! :P

Author
Shaun Inman
Posted
Apr 13th, 2004 4:11 pm
015

Hey man, Netscape 4 is down on its luck. At least I tried to help him out by giving him a place to stay until he gets back on his feet. Which is more than I can say for you Mr. Inman. For shame. I just got Netscape 4 a job busing dishes at the diner around the corner. He’s biding his time until this whole “Web Standards” ya ya blows over.

Author
Jason Santa Maria
Posted
Apr 13th, 2004 4:28 pm
016

Playful aside aside, by switching to my refined OFIR technique (using replaceChild with a generated div rather than innerHTML)I’ve nicked the space-after-inline-elements bug in Safari. But this introduces a double margin-bottom in Mozilla brand browsers (and maybe even NS 4—if it knew the first thing about document.getElementById()). That bug can be fixed by forcing a redraw by reducing the width of the window by 1px and then increasing it by the same. (If anyone knows of a more elegant solution to the redraw problem please tell me!)

It’s like killing two birds with one bird. (No stones were harmed in the re-appropriation of this cliché.)

Author
Shaun Inman
Posted
Apr 13th, 2004 7:15 pm
017

Hey Shaun. That window resize has got to go! Each page I view resizes the browser, then shifts it a few pixels from the top right, hiding part of the browser off screen. (using Firefox on XP here)

Author
John Serris
Posted
Apr 14th, 2004 8:54 am
018

That’s really weird. I’m noticing it on some versions of Safari too. (1.2 on a G5 has the problem but 1.2 on a G4 doesn’t ?!)

It shouldn’t change the top position at all since I’m only reducing and restoring width of the window—not it’s height or position.

This is only a temporary solution until I can find the cause of the doubled margin-bottom bug I’m encountering in Mozilla. I have a feeling it’s an inheritance thing and not a bug at all. But then again, why would forcing a redraw correct an inheritance issue?

Sorry for the inconvenience John! I’ll try to settle this tonight.

Author
Shaun Inman
Posted
Apr 14th, 2004 9:09 am
019

I usually browse maximised. If I browse with a smaller window, the resize script doesn’t move it. When I’m maximised it shifts the window slightly. Anyway, hope you sort it out. Looking forward to reading more about OFIR :)

Author
John Serris
Posted
Apr 14th, 2004 9:26 am
020

Just another thing I noticed. Anything layered on top of the flash gets hidden underneath it. eg. on this comments page, if I go to the top and click options (next to search), the drop down menu hides behind the flash header.

You can set the WMODE attribute to transparent which allows you to layer things over flash. More info at macromedia

Author
John Serris
Posted
Apr 14th, 2004 9:34 am
021

Not so. wmode=\"transparent\" should allow the element below a Flash movie to show through the Flash movie. Not allow other elements that occupy a z-index above the Flash movie to appear above it as they should. At least not in my experimentation.

Also, with so many Flash movies on the page (one post title and one for each comment) the wmode attribute causes all of the Flash movies to drop into low quality rendering mode in my prefered browser Safari whenever something should appear above the movie. As far as I can tell wmode in this instance will only create new problems without solving others.

The only browser I’ve encountered that honors z-index when elements overlap Flash movies is Mozilla on OS X.

Author
Shaun Inman
Posted
Apr 14th, 2004 9:48 am
022

I’ve used wmode to layer elements over flash in the past. I’m pretty sure that setting wmode allows you to use z-index on your movie and other elements. Multiple movies going into low quality mode is a problem though… Anyway, keep up the good work mate :)

Author
John Serris
Posted
Apr 14th, 2004 10:04 am
023

John, you’ll be happy to know that I’ve killed the resize script. I found that this works just as well:

if (d.body && d.body.style) {
    d.body.style.height = "1px";
    d.body.style.height = "auto";
    }
Author
Shaun Inman
Posted
Apr 17th, 2004 5:47 am
024

Good stuff mate! I knew you’d work something out.

Author
John Serris
Posted
Apr 17th, 2004 11:31 pm