Oxygen XML Editor 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 Editor 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 Editor will first try to find the image file that corresponds to the retina scaling factor. For instance, using the previous example, Oxygen XML Editor 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 Editor 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.
Refer to the following table for examples of the Retina/HiDPI image naming convention that is used in Oxygen XML Editor:
Higher resolution icons can also be included in customized frameworks for rendering them in a Retina or HiDPI display. The icons can be referenced directly from the Document Type customization (from the Action dialog box) or from an API (ro.sync.exml.workspace.api.node.customizer.XMLNodeRendererCustomizer).
As with any image, the higher resolution icons 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, icons with a Retina scaling factor of 2 will include @2x in the name (for example, myIcon@2x.png).
Developers should not specify the path of the alternate icons (@2x or @3x) in the Action dialog box or the XMLNodeRendererCustomizer API. When using a Retina or HiDPI display, Oxygen XML Editor automatically searches the folder of the normal icon for a corresponding image file with a Retina scaling factor in the name. If the higher resolution icon file does not exist, the normal icon is scaled and used instead.