15 ms·

Here's a comparison, so we can comment on he actual difference: http://www.framecompare.com/image-compare/screenshotcomparison/KWL7NNNX http://www.framecompare

Here's a comparison, so we can comment on he actual difference: http://www.framecompare.com/image-compare/screenshotcomparison/KWL7NNNX http://www.framecompare.com/image-compare/screenshotcomparis...

pvg 8y ago
You aren't going to capture the details of subpixel AA in a screenshot.
- spiralganglion 8y ago
  You most certainly can. The effect is applied when shading the text, so it does appear in screenshots, as would any other in-software AA technique (AFAIK). You can test this yourself in the browser. For instance, toggle subpixel AA using the CSS -webkit-font-smoothing property in Safari. There is a clear visible difference that you can screenshot. On some websites with a light-on-dark theme, disabling subpixel AA with CSS was an important part of improving visual consistency between browsers. It’s also important to explicitly control when working with animations that changes text scale or rotation. It’s easier to see with an enlarged screenshot, but you can totally see the difference at 1x.
  - pvg 8y ago
    I don't know what you can toggle with CSS but I'm pretty sure you can't replicate 'thing rendering a font with knowledge of your physical display' with 'bitmap made of pixels and some CSS'.
    - spiralganglion 8y ago
      The “knowledge” is applied when the text is rendered to the bitmap, not when the bitmap is pushed to the display. You’d be right if the effect happened quite late in the rendering process. It doesn’t — it happens really early.
      - rl3 8y ago
        Screenshots aren't very useful for meets-the-eye visual quality comparisons of subpixel AA unless your display has the same pixel arrangement and resolution as the display the screenshot was rendered on. Even then, there's probably other issues. I agree that they work for technical comparisons of rendered output.
      - pvg 8y ago
        Maybe I'm confused about something then but you seem to be telling me the subpixel AA is positionally independent. I can take the subpixel AA-ed bitmap and plop it in a page, open it on some other browser and OS and be certain everything is the same down to each coloured subpixel. You'd think every, say, vertical line would have the same colour artifacting, if that were the case. But they don't.
        ubercow13 8y ago
        They do? They're just coloured pixels. When you open a bitmap image on different PCs and screens and display it at 1x wrt the monitor's pixels, you would expect every pixel to have the same colour across every PC/screen, no?
        czr 8y ago
        The pixels will be the same on every PC/screen. The perceived sharpness/blurriness won't be–the whole point of the "color fringing" is that the subpixels of any particular display have an arrangement that can be exploited to add additional sharpness: https://upload.wikimedia.org/wikipedia/commons/0/0f/Antialias-vrs-Cromapixel.svg https://upload.wikimedia.org/wikipedia/commons/0/0f/Antialia... If the display you're viewing the image on has a different subpixel layout than the one that the image was rendered for, it won't look sharper.
- blt 8y ago
  It's visible in any Windows screenshot
kevingadd 8y ago
Unfortunately on my high-dpi monitor I can't get that page to display the screenshots at 1:1, so I can't see the difference due to filtering :/
- spiralganglion 8y ago
  Enlarge the page using browser zoom. Subpixel AA will make the text look red on one edge and cyan on the other. Without it, the text is perfectly greyscale. This is visible even with extensive bilinear filtering.
- zamadatix 8y ago
  Set your browser zoom to the inverse of your scaling factor e.g. if you have a 2x scale set the zoom on the page to 50%.
eddieh 8y ago
Or slide 125 from this PDF: https://devstreaming-cdn.apple.com/videos/wwdc/2018/209pydirtfgavpnj/209/209_whats_new_in_cocoa_for_macos.pdf?dl=1 https://devstreaming-cdn.apple.com/videos/wwdc/2018/209pydir... Which isn't a perfect comparison because of image compression, but at least on my retina MB they look identical to me. EDIT: You can also see the side-by-side at 28:03 in this video https://developer.apple.com/videos/play/wwdc2018/209 https://developer.apple.com/videos/play/wwdc2018/209
pygy_ 8y ago
Thanks. On my MacBook Air, the Mojave capture looks blockier. I won't update (I'm still on Sierra, actually, I ususally wait one year before updating anyways).
kps 8y ago
Here's one where the text windows don't move, so you can actually see the difference: http://www.framecompare.com/image-compare/screenshotcomparison/KWD7NNNX http://www.framecompare.com/image-compare/screenshotcomparis...
- pygy_ 8y ago
  Good idea, but all I can see is JPEG artifacts. They drown the actual differences.
  - kps 8y ago
    Ah, unfortunate, as I uploaded PNG files.

Here's a comparison, so we can comment on he actual difference: http://www.framecompare.com/image-compare/screenshotcomparison/KWL7NNNX http://www.framecompare.com/image-compare/screenshotcomparis...

pvg 8y ago

You aren't going to capture the details of subpixel AA in a screenshot.

spiralganglion 8y ago
You most certainly can. The effect is applied when shading the text, so it does appear in screenshots, as would any other in-software AA technique (AFAIK). You can test this yourself in the browser. For instance, toggle subpixel AA using the CSS -webkit-font-smoothing property in Safari. There is a clear visible difference that you can screenshot. On some websites with a light-on-dark theme, disabling subpixel AA with CSS was an important part of improving visual consistency between browsers. It’s also important to explicitly control when working with animations that changes text scale or rotation. It’s easier to see with an enlarged screenshot, but you can totally see the difference at 1x.
- pvg 8y ago
  I don't know what you can toggle with CSS but I'm pretty sure you can't replicate 'thing rendering a font with knowledge of your physical display' with 'bitmap made of pixels and some CSS'.
  - spiralganglion 8y ago
    The “knowledge” is applied when the text is rendered to the bitmap, not when the bitmap is pushed to the display. You’d be right if the effect happened quite late in the rendering process. It doesn’t — it happens really early.
    - rl3 8y ago
      Screenshots aren't very useful for meets-the-eye visual quality comparisons of subpixel AA unless your display has the same pixel arrangement and resolution as the display the screenshot was rendered on. Even then, there's probably other issues. I agree that they work for technical comparisons of rendered output.
    - pvg 8y ago
      Maybe I'm confused about something then but you seem to be telling me the subpixel AA is positionally independent. I can take the subpixel AA-ed bitmap and plop it in a page, open it on some other browser and OS and be certain everything is the same down to each coloured subpixel. You'd think every, say, vertical line would have the same colour artifacting, if that were the case. But they don't.
      - ubercow13 8y ago
        They do? They're just coloured pixels. When you open a bitmap image on different PCs and screens and display it at 1x wrt the monitor's pixels, you would expect every pixel to have the same colour across every PC/screen, no?
        czr 8y ago
        The pixels will be the same on every PC/screen. The perceived sharpness/blurriness won't be–the whole point of the "color fringing" is that the subpixels of any particular display have an arrangement that can be exploited to add additional sharpness: https://upload.wikimedia.org/wikipedia/commons/0/0f/Antialias-vrs-Cromapixel.svg https://upload.wikimedia.org/wikipedia/commons/0/0f/Antialia... If the display you're viewing the image on has a different subpixel layout than the one that the image was rendered for, it won't look sharper.
blt 8y ago
It's visible in any Windows screenshot

kevingadd 8y ago

Unfortunately on my high-dpi monitor I can't get that page to display the screenshots at 1:1, so I can't see the difference due to filtering :/

spiralganglion 8y ago
Enlarge the page using browser zoom. Subpixel AA will make the text look red on one edge and cyan on the other. Without it, the text is perfectly greyscale. This is visible even with extensive bilinear filtering.
zamadatix 8y ago
Set your browser zoom to the inverse of your scaling factor e.g. if you have a 2x scale set the zoom on the page to 50%.

eddieh 8y ago

Or slide 125 from this PDF: https://devstreaming-cdn.apple.com/videos/wwdc/2018/209pydirtfgavpnj/209/209_whats_new_in_cocoa_for_macos.pdf?dl=1 https://devstreaming-cdn.apple.com/videos/wwdc/2018/209pydir... Which isn't a perfect comparison because of image compression, but at least on my retina MB they look identical to me. EDIT: You can also see the side-by-side at 28:03 in this video https://developer.apple.com/videos/play/wwdc2018/209 https://developer.apple.com/videos/play/wwdc2018/209

pygy_ 8y ago

Thanks. On my MacBook Air, the Mojave capture looks blockier. I won't update (I'm still on Sierra, actually, I ususally wait one year before updating anyways).

kps 8y ago

Here's one where the text windows don't move, so you can actually see the difference: http://www.framecompare.com/image-compare/screenshotcomparison/KWD7NNNX http://www.framecompare.com/image-compare/screenshotcomparis...

pygy_ 8y ago
Good idea, but all I can see is JPEG artifacts. They drown the actual differences.
- kps 8y ago
  Ah, unfortunate, as I uploaded PNG files.