Font Scaling Issues in 4.X

EthanCranmer · ‎12-28-2023

When switching from ArcGIS 3.35 to 4.28, we're having trouble with the font not scaling to as large of a size and it also begins to look blurry. Is there supposed to be a font size limit for 4.28? Is there a way to change how the font is rendered in 4.28 to be more like it was in 3.35?

Below are two examples, one in 3.35, the other in 4.28, with the same font settings (size 400pt). However, the 3.35 text is much sharper and is also larger.

Arrow in Arial font for 4.28:

Arrow in Arial font for 3.35:

Code sample 4.28:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView - Create a 2D map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.28/"></script>
    <script>
      require(["esri/Map", "esri/geometry/Point", "esri/views/MapView", "esri/Graphic"], (Map, Point, MapView, Graphic) => {
        const map = new Map({
          basemap: "topo-vector"
        });

        let textSymbol = {
            type:"text",
            text: "→",
            color: "#FF0000",

            font: {
                type:"font",
                family: "Arial",
                size: 400,
                style: 'normal',
                variant: "normal",
                weight: "normal"
            }
            };

        let graphic = new Graphic({
            geometry: new Point({
                longitude: 15,
                latitude: 65 
            }),
            symbol: textSymbol
        });

        const view = new MapView({
          container: "viewDiv", // Reference to the view div created in step 5
          map: map, // Reference to the map object created before the view
          zoom: 4, // Sets zoom level based on level of detail (LOD)
          center: [15, 65] // Sets center point of view using longitude,latitude
        });
        
        view.graphics.add(graphic);
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Code sample 3.35:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView - Create a 2D map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css" />
    <script src="https://js.arcgis.com/3.35/"></script>
    <script>
      require(["esri/map", "esri/geometry/Point", "esri/graphic", "esri/symbols/TextSymbol", "dojo/_base/Color"], (Map, Point, Graphic, TextSymbol, Color) => {

        let map = new Map("viewDiv", {
          basemap: "topo-vector",
          zoom: 4,
          center: [15, 65] // Sets center point of view using longitude,latitude
        });

        map.on('load', () => {
            let textSymbol = new TextSymbol ({
            type:"esriTS",
            text: "→",
            color: Color.fromHex("#FF0000"),

            font: {
                type:"font",
                family: "Arial",
                size: 400,
                style: 'normal',
                variant: "normal",
                weight: "normal"
            }
            });

        let graphic = new Graphic(
            new Point({type: "point",
                longitude: 15,
                latitude: 65 }),
                textSymbol
        );

        map.graphics.add(graphic);
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>