Retina/HiDPI Images in Author Mode
Oxygen XML Author 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). Oxygen XML Author displays the larger set of icons starting with 150% (1.5x) scaling.
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 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 will first try to find the image
file that corresponds to the retina scaling factor. For instance, using the previous example,
Oxygen XML Author 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 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:
| 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 |