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…..
22 comments
Comments feed for this article
May 6, 2005 at 4:01 pm
Sören Kuklau
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.
May 6, 2005 at 4:19 pm
Matt
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.
May 6, 2005 at 10:57 pm
Alex
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!)
May 7, 2005 at 12:41 am
xxtyderxx
I just got my Mac and Tiger today
May 7, 2005 at 3:59 pm
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
May 8, 2005 at 7:23 pm
Peter Hall
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…
May 9, 2005 at 9:09 am
Matt
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.
May 9, 2005 at 11:16 am
Swords
Matt, stop lying and pretending you have a life.
May 9, 2005 at 12:43 pm
TheWalrus
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).
May 9, 2005 at 4:04 pm
Matt
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.
May 10, 2005 at 2:04 am
Logan
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?
May 10, 2005 at 3:33 am
Ben
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
May 10, 2005 at 3:34 am
Ben
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
May 10, 2005 at 3:35 am
Ben
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
May 10, 2005 at 4:17 pm
Lewis
I think we heard you the first time Ben!
May 13, 2005 at 2:11 am
ben
yeah sorry about that, i wanted to delete other 2 but cant lol. My ff stuffed up and posted it 3 times :(.
May 13, 2005 at 7:11 am
Chris Griego
This should shed some light on the font smoothing “changes”. http://daringfireball.net/misc/2005/04/tiger_details#font-smoothing
May 13, 2005 at 12:25 pm
Rickard Andersson
“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.”
May 14, 2005 at 6:22 am
Chris Griego
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.
July 12, 2005 at 10:40 am
Sipefree
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
July 12, 2005 at 11:18 am
Matt
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.
October 25, 2006 at 5:16 am
shane houstein
to make it work, it need to capture the mouse events and stop them bubbling. then it doesn’t unfocus the selected text. It’s pretty easy to get it going actually. You don’t need to rewrite the editor. you’re such a cry-baby!