# Font-size logic

In here, we want to explore the heuristics for the default font size and allow users to pick a meaningful font value. We should try to come up with uniform heuristics, so users pick font size values that they are familiar with (12px, 14px) and not the actual pixel size we'll show on the image (we would have to pick 1000px font size for images with multiple zoom levels).

We were thinking about two methods of acheiving this:

## 1. Relative

On each zoom level, we have to make sure a typical font size is displayed like other texts on the page. The following is the mapping that we came up with:

zoomRatio = defaultZoom/currentZoom
mappingRatio = max(imageWidth/containerWidth, imageHeight/containerHeight)
fontSize = currentFontSize * mappingRatio * zoomRatio

This section describes how to calculate the mapping of the normal text size to the text size for the image. It's important to note that the dimensions of the image in the OSD viewer can vary for different images, meaning that the font-size mapping will also differ.

To use the relative method, two values are required: the zoom ratio and the dimension mapping ratio. The zoom ratio indicates the portion of the original image that is displayed in the OSD viewer, while the mapping ratio provides information about the image's size relative to the OSD viewer viewport/container. By combining these two ratios, it's possible to scale the font-size of the image with respect to the normal display font-size.

Pros:
- It works on all the images.
- Specific font-sizes will look same across all the zoom levels.
- Images that have multiple zoom levels can have smaller or larger texts as needed.

Cons:
- We would have to disable the zoom.
- Can be confusing for some users as zooming in/out does not have any effect on the specific font-sizes.

## 2. Absolute

The font size mapping is done based on the image's actual size and doesn't change by zoom level. The following is the mapping that we came up with:

mappingRatio = max(imageWidth/containerWidth, imageHeight/containerHeight)

The absolute method differs from the relative method in that it doesn't take the zoom ratio into consideration. This means that we only need the mapping ratio to obtain the scaling factor between the image font-size and the display font-size.

To clarify, in the relative method, the zoom ratio and mapping ratio are both used to determine the scaling factor. However, in the absolute method, the zoom ratio is not considered, so only the mapping ratio is needed.

Pros:
- The definition won't change based on zoom-level.
- Easier to understand for the user.
- No need to disable zoom.

Cons:
- For images with a large number of zoom levels, the font-size options might not be small enough(Although the font-size can go as small/large as the user wants, as the input is just number input).

## Different images

### Image 1

- Relative Link https://dev.atlas-d2k.org/~nikpawar/chaise-relative/viewer/#2/Gene_Expression:Image/RID=14-47ZA?waterMark=gudmap.org&meterScaleInPixels=3082824
- Absolute Link: https://dev.atlas-d2k.org/~nikpawar/chaise-absolute/viewer/#2/Gene_Expression:Image/RID=14-47ZA?waterMark=gudmap.org&meterScaleInPixels=3082824
- Image size: 18609 * 25932
- Number of zooms: 9
- Relative:
- Works properly.
- The con can be that if the user uses a small font-size at the zoomed in level, at the default or zoomed out level the font-size is too small to see.
- Absolute
- Works properly, even at the lowest zoom level the font-size 1 is visible and can be used.
- Need to work on the border and resize sizing on zoom in.

### Image 2

- Relative Link https://dev.atlas-d2k.org/~nikpawar/chaise-relative/viewer/#2/Gene_Expression:Image/RID=16-ZHV8?waterMark=gudmap.org&meterScaleInPixels=4554686
- Absolute Link: https://dev.atlas-d2k.org/~nikpawar/chaise-absolute/viewer/#2/Gene_Expression:Image/RID=16-ZHV8?waterMark=gudmap.org&meterScaleInPixels=4554686
- Image size: 17435 * 17397
- Number of zooms: 9
- Relative:
- Works very well.
- Absolute
- Works properly, even at the lowest zoom level the font-size 1 is visible and can be used.

### Image 3
- Relative Link https://dev.atlas-d2k.org/~nikpawar/chaise-relative/viewer/#2/Gene_Expression:Image/RID=16-2GQ8
- Absolute Link: https://dev.atlas-d2k.org/~nikpawar/chaise-absolute/viewer/#2/Gene_Expression:Image/RID=16-2GQ8
- Image size: 1024 * 1024
- Number of zooms: 5
- Relative:
- Works properly.
- Slight deviation in the font-size similarity at lower font-sizes.
- Absolute
- Works same as relative. As only one zoom level is available at this image size, both the methods work similarly.

### Image 4
- Relative Link https://dev.atlas-d2k.org/~nikpawar/chaise-relative/viewer/#2/Gene_Expression:Image/RID=14-47YP?waterMark=gudmap.org&meterScaleInPixels=3082824
- Absolute Link: https://dev.atlas-d2k.org/~nikpawar/chaise-absolute/viewer/#2/Gene_Expression:Image/RID=14-47YP?waterMark=gudmap.org&meterScaleInPixels=3082824
- Image size: 26017 * 31455
- Number of zooms: 9
- Relative:
- Works properly.
- Absolute
- Works as it should.