Skip to main content
Adobe Photoshop Family

4 Messages

 • 

230 Points

Wed, Apr 13, 2011 9:51 PM

12

Photoshop: Text rendering using browser rendering engine

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.

Responses

15.1K Messages

 • 

195.8K Points

9 years ago

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?

4 Messages

 • 

230 Points

9 years ago

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.

15.1K Messages

 • 

195.8K Points

9 years ago

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.

4 Messages

 • 

230 Points

9 years ago

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.

15.1K Messages

 • 

195.8K Points

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).

129 Messages

 • 

3.2K Points

9 years ago

Last year, John Nack posted his idea for HTML layers in Photoshop: http://blogs.adobe.com/jnack/2010/06/...

4 Messages

 • 

230 Points

9 years ago

Bingo. Thanks, David.

48 Messages

 • 

920 Points

9 years ago

Great idea for the HTML5 layers!

27 Messages

 • 

448 Points

9 years ago

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.

3 Messages

 • 

94 Points

9 years ago

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.

19 Messages

 • 

340 Points

9 years ago

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.

13 Messages

 • 

388 Points

9 years ago

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.

15.1K Messages

 • 

195.8K Points

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.

13 Messages

 • 

388 Points

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.

1 Message

 • 

50 Points

I think most users need something that is close to the Cleartype for Windows designs and something that is close to OS X/iOS rendering.
The argument that Microsoft and Apple change their text rendering too often is IMHO invalid. Text rendering is the same in Vista/7 and 8. And Apple has changed anything since years. There may be subtile changes but nothing that changes the appearance too much.

18 Messages

 • 

374 Points

8 years ago

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..