Using Retina/HiDPI Images in Author Mode

Oxygen XML Author plugin provides support for Retina and HiDPI images through simple naming conventions. The higher resolution images are stored in the same images folder as the normal resolution images and they are identified by a scaling factor that is included in the name of the image files. For instance, images with a Retina scaling factor of 2 will include @2x in the name (for example, myImage@2x.png).

You can reference an image to style an element in a CSS by using the url function in the content property, as in the following example:

listItem:before{
   content: url('../img/myImage.png');
}

This would place the image that is loaded from the myImage.png file just before the listItem element. However, if you are using a Retina display (on a Mac), the icon looks a bit blurry as it automatically gets scaled, or if you are using an HiDPI display (on a Windows-based PC), the icon remains at the original size, thus it will look very small. To solve this rendering problem, you need to be able to reference both a normal DPI image and a high DPI image. However, referencing both of them from the CSS is not practical, as there is no standard way of doing this.

Starting with version 17, Oxygen XML Author plugin interprets the argument of the url function as key rather than a fixed URL. Therefore, when running on a system with a Retina or HiDPI display, Oxygen XML Author plugin will first try to find the image file that corresponds to the retina scaling factor. For instance, using the previous example, Oxygen XML Author plugin would first try to find myImage@2x.png. If this file is not found, it defaults back to the normal resolution image file (myImage.png).

Oxygen XML Author plugin also supports dark color themes. This means that the background of the editor area can be of a dark color and the foreground a lighter color. On a dark background, you may find it useful to invert the colors of images. Again, this can be done with simple naming conventions. If an image designed for a dark background is not found, the normal image is used.

Retina/HiDPI Naming Convention

Refer to the following table for examples of the Retina/HiDPI image naming convention that is used in Oxygen XML Author plugin:

Color Theme	Referred Image File	Double Density Image File	Triple Density Image File
normal	../img/myImage.png	../img/myImage@2x.png	../img/myImage@3x.png
dark	../img/myImage_dark.png	../img/myImage_dark@2x.png	../img/myImage_dark@3x.png