« Really Sexy Syndication | Main | Tomorrow is just an advert for today »

Friday, May 06, 2005

Safari 2.0 WYSI-WONT

As you probably know, I'm a MacTard, so I was pretty pleased when my copy of Tiger arrived this morning. (OK, I'm not that much of a MacTard that I had it on pre-order for 18 months). After much "oooh" and "aaaah" at the new Mail client, the new Dashboard and the new "Spotlight" search (and trying without success to turn off the blurry new font smoothing) I figured I'd have a crack at the WYSIWYG editor for Safari which is something I've been very keen to do since I heard that Safari 2.0 feature contenteditable support and designMode support.

Other developers who've found this blog entry via Google hoping to find example code or hints on how to get a WYSIWYG environment for Safari 2.0 can simply read the instructions below.

Don't bother.

There is one pretty big flaw in Safari 2.0. When you highlight some text, and then click a button, the text is de-selected. This makes it impossible to use a normal WYSIWYG interface. I managed to get it running by hitting CMD + i and CMD + b but that's about it. You can also drag images into the editing area and move them about (although they disappear with alarming regularity) however, anything else (color, size, etc) is impossible as you have to click something outside the editing screen.

Worse still, is that even if you did manage to get around that problem (and I really can't think of one bar rewriting the entire editor) the support is minimal. Forget lists and indents, they aren't supported in Safari's execCommand library.

I concluded that I'd have to start from scratch with the WYSIWYG and when I'd finished I'd only have minimal support. So it came down to this equation: time > results.

(If some developer comes along with example code or a link to prove that it can be done, I'll claim this blog entry was designed to do just that and pretend it was all part of my evil plan and won't admit to my shortcomings as a developer)

Now, how in Job's name do I revert to 10.3's font smoothing.....

May 6, 2005 | Permalink

TrackBack

TrackBack URL for this entry:
https://www.typepad.com/services/trackback/6a00d83423035953ef00d83432849853ef

Listed below are links to weblogs that reference Safari 2.0 WYSI-WONT:

» WIRELESS TOYZ from Toyz Shop
Customers want to shop the leader - a store that has a proven record with thousands of customers across the nation. Wireless Toyz represents almost every ... [Read More]

Tracked on May 25, 2006 12:12:04 PM

Comments

I don't have a machine running Tiger yet, so I can't really check. Panther, in the Appearance PreferencePane, had options for Font Smoothing level and minimum Font Size to smoothen (cf. http://www.apple.com/pro/tips/smoothfonts.html ). Maybe Tiger still has those options, and you could try and fiddle with them?

Font smoothing changes in Tiger are mentioned ( http://www.apple.com/macosx/newfeatures/over200.html ), but not explained beyond being "automatically set for your display".

Bummer about the limited contentEditable support in Safari, too, but I'm sure that will improve over time.

Posted by: Sören Kuklau | May 6, 2005 4:01:50 PM

I've tried every setting in the System Preferences to appease the blurry appearance of the fonts to no avail.

My eyes are relaxing a little and it's growing on me slowly.

Posted by: Matt | May 6, 2005 4:19:23 PM

Can alter font smoothing preferences from the 'Appearance' section (or just search for font - will find it!) - but every setting on there does not seem to make a difference to my eyes (then again I also didnt notice the font smoothing to be any different to Panther, think I must need glasses!)

Posted by: Alex | May 6, 2005 10:57:07 PM

I just got my Mac and Tiger today

Posted by: xxtyderxx | May 7, 2005 12:41:37 AM

I haven't upgraded my life to Mac yet, but I did Google a little: have you tried TinkerTool?

http://www.google.com/search?q=disable+tiger+font+smoothing

Posted by: Franklin | May 7, 2005 3:59:47 PM

Here's a thought - can you not get some JS to copy the start/endpoints of the selection into a variable /before/ someone hits a button, and then reselect it after the button is pressed? You'd probably just need to hang a bag on the side of your existing wysiwyg box for Safari support (if my idea is possible at all, that is - my level of JS competence is hovering somewhere slightly above zero)

As for lists and indents, perhaps you could simulate them with divs and some crafty JS and CSS? I've managed some nice things with wysiwyg box + CSS at work, and I think you could simulate a list item or an indent with a div - all you'd need is a bit of JS to catch the return key and insert a new DIV if it's pressed inside a list item... I think =P

Of course, all that's assuming that time <= results... ;)

Posted by: Peter Hall | May 8, 2005 7:23:07 PM

I'd prefer to wait until the Safari developer(s) fix the bug or shortcoming that deselects text when a mouse button is clicked.

Making substantial changes to the WYSIWYG core to accommodate a minority browser full of quirks that serves 2% of the internet isn't high on my list of things to do this week. :)

Posted by: Matt | May 9, 2005 9:09:52 AM

Matt, stop lying and pretending you have a life.


Posted by: Swords | May 9, 2005 11:16:28 AM

Matt, have you contacted David Hyatt (http://weblogs.mozillazine.org/hyatt) about this so called bug?

Often times, what an individual developer feels is a bug is sometimes a feature and there is a different way that is a standard to accomplish what you want to do. I'm sure you understand this.

Anyway, Safari support is important to me (as is compatibility with as many current versions of browsers as possible).

Posted by: TheWalrus | May 9, 2005 12:43:30 PM

The contenteditable extension was merely enabled in the webcore to allow one to add effects to a mail composition; it was never intended to enable full blown WYSIWYG editing.

When it is, I'll take another look. :)

Posted by: Matt | May 9, 2005 4:04:47 PM

Out of pure curiosity Matt, What are all the coding languages you know? I'm going to take a guess: (x)HTML, PHP, CSS, JS, SQL, and Perl?

Posted by: Logan | May 10, 2005 2:04:51 AM

quote from Franklin:

I haven't upgraded my life to Mac yet, but I did Google a little: have you tried TinkerTool?

http://www.google.com/search?q=disable+tiger+font+smoothing

look at the first result :p

Posted by: Ben | May 10, 2005 3:33:21 AM

quote from Franklin:

I haven't upgraded my life to Mac yet, but I did Google a little: have you tried TinkerTool?

http://www.google.com/search?q=disable+tiger+font+smoothing

look at the first result :p

Posted by: Ben | May 10, 2005 3:34:13 AM

quote from Franklin:

I haven't upgraded my life to Mac yet, but I did Google a little: have you tried TinkerTool?

http://www.google.com/search?q=disable+tiger+font+smoothing

look at the first result :p

Posted by: Ben | May 10, 2005 3:35:15 AM

I think we heard you the first time Ben!

Posted by: Lewis | May 10, 2005 4:17:36 PM

yeah sorry about that, i wanted to delete other 2 but cant lol. My ff stuffed up and posted it 3 times :(.

Posted by: ben | May 13, 2005 2:11:18 AM

This should shed some light on the font smoothing "changes". http://daringfireball.net/misc/2005/04/tiger_details#font-smoothing

Posted by: Chris Griego | May 13, 2005 7:11:59 AM

"After much "oooh" and "aaaah" at the new Mail client"

Personally, I think the new Mail app was one of the least esthetically pleasing changes in Tiger. To quote John Siracusa from Ars Technica: "The whole Mail application looks like it got beaten with the ugly stick in Tiger."

Posted by: Rickard Andersson | May 13, 2005 12:25:46 PM

Apparently "using onMouseDown instead of onClick allows you to get the event and
call the appropriate execCommand value before the selection is lost." Not that this makes for a usable interface, you still loose the selection so you can't use another button on the same selection and buttons are meant to fire on the release of the button.

Posted by: Chris Griego | May 14, 2005 6:22:44 AM

Hi there.

If you're still having problems with WYSIWYG in Safari, then I suggest you check out this link and look at the source code:

http://www.xs4all.nl/~hhijdra/stefan/ContentEditable.html

Posted by: Sipefree | Jul 12, 2005 10:40:01 AM

Yeah... that's how far I got. Notice the "LIST" buttons don't work, neither does the LINK button and neither do the UNDO / REDO buttons.

Pretty much all he has there is bold, italic and underline which is what I got.

Posted by: Matt | Jul 12, 2005 11:18:36 AM

The comments to this entry are closed.