I'm currently involved in working on an HTML/JS application that is similar to PowerPoint. This application allows users to create slides and display them on screens of various sizes (such as a screen with dimensions of 128x90 pixels or 2x1 meters).
During the creation process, users have the option to select different font sizes in pixels ranging from 11 to 100. As I add text, the parent element has the following CSS properties:
.text-show{
color: #FFFFFF;
margin-bottom: 10px;
font-size: 11px !important;
font-family: Arial;
font-weight: lighter !important;
line-height: 1 !important;
}
There are several other CSS rules implemented by a previous developer which seem to be causing some issues.
My problem arises when I add text like this:
<p> some text <span style="font-size: 11px">other text</span></p>
While creating the slide, the size of ‘p‘ appears as ‘SOMEx12px‘, but in the final result it becomes ‘SOMEx12.66px‘ due to some unknown reason.
Given the limited pixel space I am working with, even a small variation like 0.66px is noticeable, especially when combined with other elements on the slide.
So, my question is why and how can I fix this issue? I've reviewed the CSS code thoroughly but couldn't find anything out of the ordinary.
To test it further, I used the same browser for both creating and viewing the slides, and the screen resolution remains consistent across the board.