What is the painting order for image, text, backgroundImage and backgroundColor?

[nigelmegitt]

In the case that a span, for example has more than one of:

• non-transparent tts:backgroundColor
• text content
• a tts:backgroundImage
• an <image> child (i.e. a "foreground" image)

what is the painting (z) order? Or better yet, where is the painting order specified?

[skynavga]

you are forgetting - border - ruby - text emphasis marks - text outline - text shadow

…

On Fri, Dec 16, 2016 at 11:27 AM, Nigel Megitt ***@***.***> wrote: In the case that a span, for example has more than one of: - non-transparent tts:backgroundColor - text content - a tts:backgroundImage - an <image> child (i.e. a "foreground" image) what is the painting (z) order? Or better yet, where is the painting order specified? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#228>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAXCb2N6geUr7wI44u8sLkq4SergJq1Uks5rItgCgaJpZM4LPd3W> .

[nigelmegitt]

OK happy to include those in the question! Where is the painting order specified?

Looking at CSS 2.1 Appendix E some but not all of those paintable things are listed, so that seems to be incomplete for our purposes. It is not obvious that any of the informative references to CSS 3 complete it either.

[nigelmegitt]

I just happened upon https://www.w3.org/TR/css-text-decor-3/#painting-order which I quote here for convenience:

As in [CSS21], text decorations are drawn immediately over/under the text they decorate, in the following order (bottommost first):

• shadows (‘text-shadow’)
• underlines (‘text-decoration’)
• overlines (‘text-decoration’)
• text
• emphasis marks (‘text-emphasis’)
• line-through (‘text-decoration’)

Where line decorations are drawn across box decorations or atomic inlines, they are drawn over non-positioned content and just below any positioned descendants (immediately below layer #8 in CSS2.1 Appendix E).