November 02, 2010

Adobe’s enhancing WebKit for better typography

I’m excited to say that Adobe’s working with Google to enable better HTML-based typography, contributing the work to the open-source WebKit project.

Why not just say “Web typography”? Because HTML goes beyond the Web, supporting apps like Adobe’s new tablet publishing solution.  Trouble is, for all its strengths (e.g. separating content from layout), HTML’s type handling has been pretty limited–especially for creating print-quality layouts.

Adobe wants to help solve the problem, making HTML better suited to more demanding applications.  Check out this demo from engineering VP Paul Gubbay:

Paul writes,

The team has taken the approach of extending CSS with a few new elements utilizing the webkit- prefix so that the designer can adequately describe their intent for the content as the page is resized to simulate working across different screens.  We look forward to working with the Webkit Open Source project and of course the W3C to contribute our work back in the most appropriate way.  And, as always your comments are very much appreciated.

Posted by John Nack at 6:53 AM on November 02, 2010


  • Julian Kussman — 7:53 AM on November 02, 2010

    Awesome. What does Google have to do with this though? Can’t Adobe just contribute straight to the project?

    • Matthew Fabb — 8:02 AM on November 02, 2010

      I’m guessing that Adobe is working with Google, in order to test their implementation within Google Chrome. That the code will be submitted to the WebKit project, which then Chrome is likely the first browser to use these new CSS properties.

  • Ted Wise — 8:03 AM on November 02, 2010

    @Julian I was wondering the same thing. Is the Google partnership a shot against Apple since they’re the primary Webkit maintainers?

    Regardless, this looks awesome, very glad to see this in HTML.

    • Paul Gubbay — 8:21 AM on November 04, 2010

      We’re working with Google to leverage their Webkit contribution knowledge and accelerate integration with a Browser such as Chrome. This work becomes really useful when all Browsers support it as part of the Standard. It will take some time to get there and I’m sure that the approach will be modified based on feedback but we’re committed to making this work.

      We’ll also be looking at JS libraries to fill in the gaps when Browsers are slower to adopt.

  • Greencard Blog — 9:32 AM on November 02, 2010

    With regards to the developing story of ANDROID – I personally believe that Google and Adobe will anyway have to team up in order to optimize the user experience on mobile devices.

    Cheers – Daniel

  • John Hoffman — 10:54 AM on November 02, 2010

    To be useful to web designers, new features need to display similarly in all browsers. Thus, working with Google is a clearly a first step towards working with the other browser makers so that the OpenType and other typographical features will work properly in all browsers.

    Plaudits to Adobe for helping advance html/css type features.

    I understand that using a browser specific prefix helps facilitate experimenting with new features, but I hope that the prefixes will be dispensed with as quickly as possible. Currently, there are instructions that require three separate versions to work with the 5 major browsers (with a -moz prefix for Firefox, with a -webkit prefix for Chrome and Safari). Hopefully, Webkit and Mozilla will soon make those instructions work without prefixes so that one version of those instructions will work with all the major browsers.

    • Adobe UI Gripes — 7:34 AM on November 03, 2010

      The prefix goes when the result is identical in all browsers.
      It’s not a big deal having to write out 2/3 drop shadow definitions at the minute and if it’s the typing that bothers you then just use a snippet in your text editor.

  • Interesting — 3:54 PM on November 02, 2010

    Sorry, can’t view the video because it’s in flash.

    [It isn’t “in Flash.” It’s served up by YouTube, and they should be presenting the correct playback layer (Flash Player or something else) depending on your device’s capabilities. Sounds like maybe your device sucks. –J.]

    • Kyle Wilkinson — 3:48 PM on November 03, 2010

      To John: Looking at your HTML, you didn’t use YouTube’s new iframe embed code to embed the video. Without this, I don’t think YouTube will serve up the video in anything but Flash. Perhaps it’s just your web dev skills that suck.

      [Perhaps. I naively copy & paste the markup that Google/YouTube give me. If their iFrame solution is great, why don’t they give it to me, as Vimeo does? –J.]

      Normally, I wouldn’t make a comment like this, but I’m appalled at your level of professionalism in the comments.

      [Sorry to let you down. –J.]

  • imajez — 6:40 PM on November 02, 2010

    Drools at prospect of being able to do decent text layout for web, please don’t let browsers all decide to renders things differently

  • Valery Sibikovsky — 8:59 PM on November 02, 2010

    Justified text without hyphenation looks really lame. And there is no sense in text wrapping without justified columns of text.

    But even working muli-lingual hyphenation without justification rules will result in second-rate typography.

  • Dragos — 1:12 AM on November 03, 2010

    Some interesting remarks on this video:

    [How nice. Any attempt to move the ball forward is “sad,” a “waste of talent.” What a bunch of bullshit. Does anyone think that this demo unto itself constitutes the be-all end-all of HTML-based typography? Of course not. As for the Apple/Google angle, last I heard Google had surpassed Apple as the main contributor to WebKit. Oh, but it all must be some anti-Apple plot; it always is.

    Incidentally, Adobe already open-sourced a lot of great text layout power via the Text Layout Framework. It already offers hyphenation, ligatures, etc. on the Web and in digital publications today. Oh, but because it runs in Flash, it must be evil and unsavory. Fine, whatever; we’ll work to bring as much goodness as possible to you in whatever runtime(s) you prefer (or that you have someone prefer for you). Thanks for the “FU” en route, though. –J.]

    • Adobe UI Gripes — 7:36 AM on November 03, 2010

      I have yet to work with a Flash developer who will even touch that framework with a barge pole, they all just whine it’s too complicated and will take too long.

      • Zeh — 11:17 AM on November 03, 2010

        You do not work with good developers, or the developers you work with only use text for simple things and never had to take a good look at what they’re doing and how.

        The new text engine works great, and the fact that Adobe has TLF as an open-source layer over that means that anyone who dislikes it can build something better themselves.

    • tomvons — 12:34 PM on November 03, 2010

      Google passed Apple in number of checkins at some point and there were blog posts about it, but that’s a pretty lousy measure of anyone’s level of contribution to a project.

      All the same, being a representative of Adobe you could at least attempt to take the high road in these discussions.

      [I did, above. I didn’t point out in the post that you’ve been able to do all this and more in Flash for years, and that getting the support consistently deployed to a large number of Web browsers will take years and years, etc. I didn’t pick fights, and I didn’t point out serious, intractable downsides to the multi-vendor-runtime “open Web.” I just talked about how Adobe is putting its intellectual property, for free, into WebKit (and not just Flash Player). It sucks beyond believe to get hammered for doing so. (Constructive feedback, such as that it would be great for Adobe to do even more to help with better hyphenation, etc., is of course welcome.) –J.]

    • Eric — 1:00 PM on November 03, 2010

      Got to love bloggers who write heavily opinionated posts without understanding details that are laced with facts (not all of which are accurate*) to back up their opinions and are then too weak to leave the comments section open on their blogs.

      John, I wonder what kind of moral outrage you would spark if you closed all comments here.

      *I’m basing this on a few of their posts that I read after following the link – enough to not bother going back again.

      • Thibaut Sailly — 2:00 PM on November 03, 2010

        Eric, this is not weakness, it’s just that twitter is fine for this now, and it allows me to spend more time off the computer. You can reach me here if you bother to: @thibautsailly.

        • Eric — 10:46 AM on November 15, 2010

          Open to dialog on your lengthy posts as long as it is kept to 140 characters or less and in a different venue? Sorry but it’s a lot easier to just read a different blog.

  • Rick McCleary — 6:53 AM on November 03, 2010

    Dragos says:
    Some interesting remarks on this video:

    The remarks in the linked post (not a video) display a stunning and remarkable naivete about the iterative nature of software development, scientific discovery, evolution, personality development, and, well, everything that doesn’t emerge from the womb fully formed and ready for prime time. Which I guess means, umm, EVERYTHING.

    Don’t let this guy into the lab. (“Awww, that thing sucks. It will never work.”)

    • Mylenium — 11:07 AM on November 03, 2010

      I think it’s not so much naivité, as you put it, but rather a matter of once more mistaking a tech demo as in “it could be done” for a finished feature/ product. And he has the wrong priorities. Ultimately even the smartest auto-layout engine will fail on some scenarios. such a thing as shown in the demo isn’t even trivial in InDesign…. People simply should get used to the fact that some things won’t look as pretty as they may have been intended and originally designed, when viewing on another class of gadget. Even the biggest company cannot design their pages to cater for each and every single device on this planet… It’s a simple matter of whether you actually want people to read your stuff or if you want to be snobistic about pixel-perfect layout. I know which one I prefer…

  • Adobe UI Gripes — 7:42 AM on November 03, 2010

    Very impressive, can’t imagine how lame the internet would be if WebKit hadn’t come along.

  • Jeremy Chone — 10:07 AM on November 03, 2010

    This is great. I love all the Adobe’s innovations around HTML these days. Glad to see Adobe aggressively improving their tools for modern HTML.

  • peng — 1:37 PM on November 03, 2010

    Mr. Nack,
    Respectfully, that demo shows Adobe is still on the wrong track when it comes to web technologies. There is no need for this feature of text-wrapping. Most serious designers would never wrap their copy into such grotesque shapes. Please provide serious support for common typographic techniques like better kerning, tracking, and smart hyphenation/justification so web type isn’t as horrid with its egregious rivers. I’m aware of word-spacing and letter-spacing and they’re utterly primitive. Maybe try drawing from open-source projects like wp-typography and php-typography.

    • virgil — 11:36 PM on November 04, 2010

      It’s a DEMO, it’s supposed to have the “wow” factor. Incidentally, that article in the demo includes Adobe’s own glyph shaping&rendering solution, with things like stem darkening, subpixel rendering, linear blending of text. If you show it side-by-side with the “webkit rendering”, it’s relatively obvious that our text looks better.
      But guess what…. from all the people who see the demo live (because you can’t see this kind of text improvements on youtube) – nobody notices if we don’t explicitly show side-by-side text comparison. And even then, it’s a “meh, yeah, you’re right, it does look slightly better”.
      Same for good justification – it’s computationally expensive. If we put better justification in a demo (we tried), the animation doesn’t look “cool”, it’s slower and the picture lags behind your finger. Maybe it wouldn’t matter in real-life because you don’t need to reflow text 10 times/second… but it makes a huge difference in a demo. You really have to remember it’s a demo – it’s not something that Adobe sells to publishers, today.

  • Thibaut Sailly — 1:57 PM on November 03, 2010

    Hello there,

    sorry for the trouble I seem to cause with my blog post.

    All I wanted to say, and said, was :

    1. Good on Adobe to get on the webkit train and actively making progress to enhance it. And congratulations for this technical achievement.

    2. The typography on this example doesn’t allow a basic and comfortable reading experience, but features a style effect for its own purpose. To the discomfort of the reader, who’s the one we should care about first and foremost.
    Why doesn’t the effect work ? Not because this call out feature is a work in progress, but because you need a very good justification engine to perform it well. All I’m suggesting is : get the brains on the justification effort, and once and only then this foundation layer is fixed, bring the call out. I know it’s an effort representing thousands of man hours because you have to basically redo everything for each language, but if we want to get good call outs, we have to get through this. Otherwise it’s just lipstick on a pig. If we want to make the web a better place, we should resist to the urge to implement “press like” features for show off purposes, and aim the efforts at solving basic legibility problems.

    3. A little more care could have gone into the making of the demo of this I’m-not-that-dumb-thank-you work in progress project: get a better lighting condition and the right white balance, stabilize the phone on a table and the camera on whatever’s handy. Get a Canon 5D (shouldn’t be hard to find at Adobe) to shoot for an even better image quality. That’s it. Not much effort nor time could bump the quality of what represents hours of brilliant peoples work on the web. A little more care.
    As for the Apple reference, come on. You couldn’t find anything else than the giraffe to demonstrate the performance of this feature? I’m not opposing Apple to you, you understood it this way. I could have added that the justification support in iBooks sucks just as much, and that it shouldn’t be an option to display html or epub text this way today. You’re both on the same boat to this regard.

    Also, the tone of my post seems to have irritate some of you. Let me just say that I was pissed. But more by a way of doing things – going for the spectacular while omitting more essential but discreet issues – than by the people involved in this project, you or Paul and his team. A reader cared to write to me his disappointment regarding this and said I sounded like an 11 years old child. Well, 11 years ago I wouldn’t have been able to write like this in english because it’s not my mother tongue. So indeed, I’m an 11 y.o. boy, there you go. Finding the right words has become easier, but some progress and fine tuning has to be made regarding the tone.

    • imajez — 5:45 PM on November 04, 2010

      You are still missing the point. It is a demo of one aspect of an unfinished work in progress. It is also not a edict of how to use said feature, just a demo of what it can currently do. If you do use it, I’m assuming giraffes will not be compulsory either as that also seems to have upset you too for some reason.

      As for getting justification sorted, I’m sure each browser will decide to interpret what ever justification algorithm/engine is used in its own individual way to make it look different in every browser anyway. Though I’m sure that will still be Adobe’s fault too, judging by the sort of comments you see here and elsewhere.
      One can also be impressed by demos like this, even if it is obvious that the justification still needs work and the presentation is lacking polish.

  • Sean Kerwin — 2:05 PM on November 03, 2010

    With respect, an object/embed with type ‘application/x-shockwave-flash’ with a src URI that returns content-type ‘application/x-shockwave-flash’ sure sounds a lot like ‘in Flash’ to me.

    It isn’t the responsibility of the browsing agent to rewrite the page to remove an explicit dependency on the Flash plugin. The fact that some browsing agents have been forced to do so is a large part of why many people consider non-Flash video playback standards to be so important.

  • Alan Hogan — 3:23 PM on November 03, 2010

    Please stop publishing videos without HTML5 fallback. I just see a big empty space where what I’m assuming a video goes.

    • Phil Brown — 4:12 PM on November 03, 2010

      Which HTML5 standard should that fallback be to?

      Also, it views just fine on my iPhone and iPad, so YouTube is deliverying the content just fine. Your device or browser might suck, though.

  • Andreas Kuckartz — 12:18 AM on November 04, 2010

    When I went to the page behind “Adobe’s new tablet publishing solution” there was an attempt to get me to download Windows malware.

  • Eric — 6:12 PM on November 04, 2010

    Haven’t we had enough of the vitriol for one Autumn? The election’s over! Jerry Brown won! Get over it.

    Oh wait, Adobe’s the bag guy eh? I have my issues with Adobe (they really screwed me over recently by changing the rules about qualifying for educational software and then didn’t allow me to return the software unused) but their efforts to make the industries they serve more productive are appreciated by this graphics professional. (Let’s not even get into Acrobat Pro being out of sync with the creative suites.) I bring these things up to show I’m not Adobe sycophant.

    Anyway, personal attacks against John Nack are uncalled for. He’s been a real gentleman for years as he maintains this blog and keeps us informed on what’s up with our favorite software tools for our jobs. I’d hate to see this devolve into such an ugly mess that he has to go back to moderating comments and even possibly deleting the worst of them.

  • Iain Anderson — 1:56 PM on November 06, 2010

    Great to see some better typography control coming to browsers. While I would rather see a browser provide InDesign-like controls such as “balance ragged lines” or automatic tracking and word-spacing rules to make justified text look better, this stuff does make for a good demo.

    Thanks for contributing better typography smarts to WebKit.

  • Simon Bérubé — 6:01 PM on February 17, 2011

    I agree. Balance ragged lines seriously needs a place in CSS3. It’s unfortunate that there haven’t been more requests for the feature to be worked into CSS. I’m surprised that there haven’t been more discussion about it. My post from almost two years ago is currently first on a Google search for “balance ragged lines css.”

  • ftvs — 5:27 AM on June 26, 2011

    Curious as to how this will interact with multi-column:

    as this seems to be similar:

    Demo of CSS3 columns:(WebKit/Gecko):

    No need to reply, consider this a drive-by comment.

Copyright © 2020 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)