Photoshop: Text rendering using browser rendering engine

  • 12
  • Idea
  • Updated 6 years ago
  • (Edited)
Better text rendering by using browser rendering engines (ex. webkit, gecko) to get a better idea of how a design might look in a browser.
Photo of Chase Doak

Chase Doak

  • 4 Posts
  • 1 Reply Like
  • human

Posted 8 years ago

  • 12
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 822 Reply Likes
We can hardly use the (MANY) browser rendering engine(s), nor match them bug for bug.

Do you just want text in Photoshop to look more like browser rendered text?
Photo of Chase Doak

Chase Doak

  • 4 Posts
  • 1 Reply Like
I'm not suggesting replicating the look of each browser, since many browsers use proprietary engines or tap into the font smoothing of the OS. I just haven't been able to get good results using the anti-aliasing modes available, and I thought maybe it would be possible to create something like a "web layer" that actually shows the text using a browser rendering engine, or even the engine used by the panels to display web content.

The advantage of being able to display web content in a PS layer would actually go far beyond being able to see how text would render. Maybe it's not possible. I just thought I'd suggest it.
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 822 Reply Likes
Well, you've specified several more things that can't happen (for a variety of reasons).

If you don't define what problem you're trying to solve, then we probably can't help you.
Photo of Chase Doak

Chase Doak

  • 4 Posts
  • 1 Reply Like
The problem is just that the anti-aliasing options don't really come close to any of the browsers. We have customers who get frustrated when the sites we make don't look like the mockups they approve, and it's hard for them to understand that Photoshop doesn't render text the same way browsers do. It also makes it difficult at times to make typographical choices, since I'll have text look great in PS, but then terrible in most browsers, even with font smoothing.

If text rendering was just close to Webkit, it would cover many of the browsers out there. Since AIR uses Webkit for its HTML rendering, and the same is used for custom panels in Photoshop, I thought perhaps it could be integrated into a text layer within the editing window. Apparently that is not the case.
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 818 Reply Likes
Ok, that's something I can act on -- by trying to make a way to make Photoshop's text look closer to various browser renderings.

And yeah, rendering for a browser is not the same as what we need for rendering to a layer (and I spent a lot of time trying to make it work).
Photo of David Jensen

David Jensen

  • 131 Posts
  • 46 Reply Likes
Last year, John Nack posted his idea for HTML layers in Photoshop: http://blogs.adobe.com/jnack/2010/06/...
Photo of Chase Doak

Chase Doak

  • 4 Posts
  • 1 Reply Like
Bingo. Thanks, David.
Photo of Mama Shan Canfield

Mama Shan Canfield

  • 50 Posts
  • 5 Reply Likes
Great idea for the HTML5 layers!
Photo of Kenny

Kenny

  • 27 Posts
  • 0 Reply Likes
When I compare the text rendering in photoshop with firefox I see differences. The font in photoshop is more bold. No matter what rendering type I choose, I cannot get it like in Firefox. This is bad for web designing. Because I don't see what I will get...

On the image you see photoshop at the top and Firefox at the bottom.



Firefox v10.0.2
Photoshop v12.1 x64

This reply was created from a merged topic originally titled
Text rendering in PS is not like in Firefox.
Photo of Robert Man

Robert Man

  • 3 Posts
  • 0 Reply Likes
On behalf of the web design community, please add options to render text as it would in browsers. Its lack of accuracy is a key argument for devs to switch to prototyping in code.

This reply was created from a merged topic originally titled
Accurate Text Rendering For Web Design.
Photo of Josh Baker

Josh Baker

  • 19 Posts
  • 2 Reply Likes
Sometimes I think Adobe needs to split off a version of Photoshop for UI/Web Design, like the way they created Lightroom for photographers. On the other hand, I'm afraid of what might be lost in the new product if they ever did that. There is a lot that Fireworks has going for it, and yet it falls so short. Photoshop is simply the best.
Photo of Tyler Murphy

Tyler Murphy

  • 13 Posts
  • 4 Reply Likes
In a nutshell, this: http://dribbble.com/shots/301619-I-ha...
There has been a topic on providing web browser text rendering options as well: http://feedback.photoshop.com/photosh...

I do UI design for OS X and iOS, and the rendering of fonts at 11, 12, and 13 px size can really affect the feel of the interface. People always tell me that the text looks "off" in a mockup I've made, even though I'm using 13 px Lucida Grande, the default OS X font. This is because the crisp and sharp antialiasing options in Photoshop just look too rough around the edges.

It would be great if the text anti-aliasing drop down in Photoshop had options for different operating systems (and browsers too), so you could create UI and website mockups that look authentic.

This reply was created from a merged topic originally titled
Option to anti-alias text using the operating system rendering engine.
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 822 Reply Likes
In a nutshell: no, that could not be done.

For one thing, the browsers and OSes change their type rendering too often.
And they render in a way that makes sense for final form (you're never going to edit the pixels from a browser, and it knows exactly what display it's on), but doesn't work for an editable document (like Photoshop).

Try using the type in Photoshop CS6 - it's closer to the browsers and OS, even though we can't be bug compatible with every browser version on every OS version.
Photo of Tyler Murphy

Tyler Murphy

  • 13 Posts
  • 4 Reply Likes
I have been using the CS6 beta for a week now, and the font rendering of computer screen fonts is still not great. This is basically the difference between Photoshop and the browser rendering: http://www.quora.com/Tyson-Rosage/Pos...

If I understand this article correctly, it seems to suggest that sub pixel hinting can improve rendering, but this can depend on the screen you are viewing text with, and might not be possible in Photoshop: http://thomasmaier.me/blog/2010/03/17...

Still, if you take a screenshot of text rendered in a browser, it seems to look better on any screen than an saved image from Photoshop, so I think the rendering could be improved.
Photo of artturi85

artturi85

  • 17 Posts
  • 2 Reply Likes
Anti aliasing methods for the fonts in photoshop.

Hello, I have been wondering this for while. When I open a font, I have few anti aliasing methods for it, like "none" "sharp" "crisp" etc. So what I would need as an additional at there is "web".
Because if you take a screenshot from webpage, zoom to it, you see that every browser has an unique anti aliasing method for the fonts. In photoshop the fonts are in only one color, but in web browser there is few colors that makes the font looking like more crisp than in the photoshop. I would like to use this method for the web design I do at work. It's a small thing, but it would make the design look for more realistic. Thanks :)

This reply was created from a merged topic originally titled
Web anti aliasing method for the fonts..