Why does text outline look differently in the compiled preview?

We've implemented text outline using a specific WebKit CSS styling that is only understood by Google Chrome. When you submit your ads, we rasterize the text (essentially taking an image of the text) which allows the text outline to be viewed in all browsers.

When we rasterize text, there can be discrepancies between the editor & compiled preview. We have found that the following tend to have more noticeable discrepancies:

  • Certain bright colors (i.e. orange shadow)
  • Adding blur
  • Decreasing opacity
  • Auto-sized text may have shadow cut off if X & Y values extend beyond the bounding box
  • Use smaller X & Y values for shadow (i.e. have the shadow closer to text)
  • Manually enter font size and extend bounding box to accommodate for shadow
  • Text outline thins out post-rasterization (i.e. thickness = 2 looks like 1)

We recommend referring to the compiled preview and adjusting the ad in the editor since the compiled preview will reflect how the ad is served. 

Did this answer your question?