Question 191205 in Html Question posted in
Some basic documentation can be found here.

Html – Absolute CSS text sizes not respected for small displays, even with text-size-adjust: none

To better characterize my vision difficulties, I’ve made a web page:

https://marknahabedian.github.io/VisionTests/words-test.html

It displays a series of randomly chosen words at progressively smaller font sizes.

One can choose a light or dark theme, and from several type faces and stroke weights to see if that helps.

I use the HTML style attribute with the absolute pt unit to conrol the text size.

When I look at this page on a small display like a smart phone
though, the text which has been given an absolute size in points
is much smaller than on my laptop, where 36pt text is half an
inch high. I don’t understand why the absolute size isn’t
respected on small displays.

I include text-size-adjust: none and its browser specific
variants in my style rules but still on my phone the 36pt text is
only 1/4 inch tall.

Code is on GitHub:

https://github.com/MarkNahabedian/VisionTests

I welcome your suggestions.

Thanks.

Tags:

2

Answers


  1. 0

    As explained in the comment, you should use pixel sizes when displaying something on a pixel screen. If you want the text to be the same size on every device, you have to multiply the pixel value by the resolution. This applies to Retina resolution on Apple or HD resolution on other devices, or 4K for example.
    I have built an example here.

    You can never make it perfect, because the pixel sizes are different on different devices. But from my point of view this is the best solution for your problem.

    Edit:
    i just saw on my macbook that i forgot something. only if a device has small pixels, like smartphones with high resolution you should multiply the pixel-size with the dpi. you still have to do that in this code that.
    I’ll have to see if I can find a solution for that too.

    WORD_LIST = ["cat", "dog", "tac", "god", "act"];

// Size in points (CSS pt):
TEXT_SIZES = [ 
  36 * window.devicePixelRatio, 
  30 * window.devicePixelRatio, 
  24 * window.devicePixelRatio, 
  16 * window.devicePixelRatio, 
  14 * window.devicePixelRatio, 
  12 * window.devicePixelRatio, 
  10 * window.devicePixelRatio, 
  8 * window.devicePixelRatio, 
  6 * window.devicePixelRatio 
];
WORDS_PER_SIZE = 20;

window.addEventListener(
  "DOMContentLoaded",
  (event) => {
      add_control_change_handlers();
      initialize_words(WORD_LIST);
      select_theme();
      update_text();
  });

  function add_control_change_handlers() {
      document.querySelector("#theme").addEventListener("change", select_theme);
      document.querySelector("#font-family").addEventListener("change", select_font_family);
      document.querySelector("#font-weight").addEventListener("change", select_font_weight);
  }

function select_theme(event) {
    // Change class attribute of body element
    let body = document.querySelector("html > body");
    body.setAttribute("class",
    document.querySelector("#theme").value);
}

function select_font_family(event) {
    update_text();
}

function select_font_weight(event) {
    update_text();
}


function update_text() {
    // Update the style attribute of the #text element based on the
    // falues of the selected font family and weight.
    let text = document.getElementById("text");
    let family = document.querySelector("#font-family").value;
    let weignt = document.querySelector("#font-weight").value;
    text.setAttribute("style",
                      "font-family: " + family + "; " +
                      "font-weight: " + weignt + ";");
}


// Using pt, text on my cell phone is half as high as expected -- 36pt
// is only 1/4" high.
// Using px, as sugfgested in
// https://stackoverflow.com/questions/76496769/absolute-css-text-sizes-not-respected-for-small-displays-even-with-text-size-ad
// doesn't seem to fix the problem though.
function pt2px(pt) {
    return 96 * pt / 72;
}


function initialize_words(word_list) {
    let wordcount = word_list.length;
    text_elt = document.getElementById("text");
    for (let j = 0; j < TEXT_SIZES.length; j++) {
        let size_elt = document.createElementNS(text_elt.namespaceURI, "p");
        size_elt.setAttribute("style",
                              "font-size: " +
                              TEXT_SIZES[j] + "px;");
        size_elt.appendChild(document.createTextNode("" + TEXT_SIZES[j] + " "));
        for (let i = 0; i < WORDS_PER_SIZE; i++) {
            let word = word_list[Math.floor(Math.random() * wordcount)];
            let textnode = document.createTextNode(word + " ");
            size_elt.appendChild(textnode);
        }
        text_elt.appendChild(size_elt);
    }
}
    .controls
{
    display: block;
    font-size: large;
}

(html,body) *
{
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

body
{
    width: 90%;
}

.text
{
    display: block;
    width: 100%;
}

.theme-dark
{
    background-color: black;
    color: white;

}

.theme-light
{
    background-color: white;
    color: black;
}
    <html>
  <head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Vision Word Reading Test</title>

  </head>
  <body>
    <h1>Vision Word Reading Test</h1>
    
    <div class="controls">
      <table>
        <tr>
          <td>
            <label for="theme">theme</label>
          </td>
          <td>
            <select id="theme">
              <option value="theme-dark">dark</option>
              <option value="theme-light">light</option>
            </select>
          </td>
        </tr>
        <td>
          <label for="font-family">font family</label>
        </td>
        <td>
          <select id="font-family">
            <option value="monospace">monospace</option>
            <option value="ui-monospace">ui-monospace</option>
            <option value="sans-serif">sans-serif</option>
            <option value="ui-sans-serif">ui-sans-serif</option>
            <option value="serif">serif</option>
            <option value="ui-serif">ui-serif</option>
            <option value="system-ui">system-ui</option>
          </select>
        </td>
        <tr>
          <td>
            <label for="font-weight">font weight</label>
          </td>
          <td>
            <select id="font-weight">
              <option value="normal">normal</option>
              <option value="bolder">bolder</option>
              <option value="lighter">lighter</option>
            </select>
          </td>
        </tr>
      </table>
    </div>
    
    <div id="text" class="text">
    </div>

  </body>
</html>
    Login or Signup to reply.
  2. 0

    Implementation of viewport will vary by device / manufacturer. It’s best to stick with standard sizing to achieve best possible support across viewports.

    .xxs{font-size: xx-small;}
.xs{font-size: x-small;}
.s{font-size: small;}
.m{font-size: medium;}
.l{font-size: large;}
.xl{font-size: x-large;}
.xxl{font-size: xx-large;}
.xxxl{font-size: xxx-large;}
    <span class="xxs">Hellow World</span><br>
<span class="xs">Hellow World</span><br>
<span class="s">Hellow World</span><br>
<span class="m">Hellow World</span><br>
<span class="l">Hellow World</span><br>
<span class="xl">Hellow World</span><br>
<span class="xxl">Hellow World</span><br>
<span class="xxxl">Hellow World</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search