How to maintain the ratio of HTML content from an Openseadragon view?

Question

On my website, I would like to ensure that the text resizes proportionally to the content. I have added an overlay using the OpenSeadragon functionality (overlays, checkResize: false), but the issue is that the text enlarges with the zoom. I would like to achieve the same effect as the red arrow, but for text and other HTML content.

Issue zoom in

Issue zoom out

Previously I was able to install the html-overlay plugin, everything worked perfectly. However, the more I progressed, the more content I had to resize with the plugin. After a while the website became unstable on mobile with crashes and became much less fluid. So I added svg overlay which handles resizing differently, for shapes it works well, however I can't integrate text or other HTML content.

I would first like the text to keep the ratio of the image according to the different zoom levels by using a resize that does not crash the site, a solution like svg-overlay seems relevant to me. Maybe there are others for what I want to do, if possible natively.

Here is my html code:

<h1 id="overlay1" data-i18n="sommaire"></h1>
<img id="right-arrow-overlay" src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Red_Arrow_Right.svg" alt="Right arrow" width="20" class="openseadragon-overlay" style="position: absolute; left: 244.86px; top: 205.808px; display: block;">

My viewer's initialisation:

var viewer = OpenSeadragon({
  id: "seadragon-viewer",
  prefixUrl: "./openseadragon-bin-4.1.0/images/",
  tileSources: {
    Image: {
        xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
        Url: "output/plumeintrepide_files/",
        Format: 'jpg',
        Overlap: "1", 
        TileSize: "254",
        Size:{ 
          Height: "40960",
          Width: "65536"
        }
    },
    overlays: [{
      id: 'overlay1',
      px: 7425,
      py: 10000,
      width: 1000,
      height: 1000,
      checkResize: false
    } , {
      id: 'right-arrow-overlay',
      px: 7425,
      py: 11000,
      width: 1000,
      height: 1000,
      checkResize: false
    }]
  }
});

I did a test with svg-overlay and d3, but for now I only display cubes. In any case the ratio is well preserved :

svg_overlay = viewer.svgOverlay();

overlay = d3.select(svg_overlay.node());
// overlay.appendChild(document.querySelector(".text-overlay--summary"));

d3.select('.text-overlay--summary').text("I am adding text");

data = [
  {
    x: 0.13,
    y: 0.125,
    width: 0.1,
    height: 0.095
  }, {
    x: 0.5,
    y: 0.3,
    width: 0.4,
    height: 0.05
  }, {
    x: 0.6,
    y: 0.05,
    width: 0.1,
    height: 0.15
  }
];

/* Visualization
 */

rects = overlay.selectAll('rect').data(data);

rects.enter().append('rect').attrs({
  x: function(d) {
    return d.x;
  },
  y: function(d) {
    return d.y;
  },
  width: function(d) {
    return d.width;
  },
  height: function(d) {
    return d.height;
  }
});

d3.selectAll('rect').each(function() {
  return svg_overlay.onClick(this, function() {
    return console.log('click', arguments);
  });
});


/* Resize the overlay on window resize
 */

d3.select(window).on('resize', function() {
  return svg_overlay.resize();
});

I hope I was clear enough, any ideas?

This is my test website

Answer 1

For integrate HTML content in overlays and keep ratio of text elements, finally I used foreignObject :

<div id="overlay1">
  <svg viewBox="0 0 4500 5700" xmlns="http://www.w3.org/2000/svg">
    <foreignObject x="0" y="0" width="100%" height="100%">
      <h1 data-i18n="sommaire"></h1>
      <img id="right-arrow-overlay" src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Red_Arrow_Right.svg" alt="Right arrow" width="20" class="openseadragon-overlay" style="position: absolute; left: 244.86px; top: 205.808px; display: block;">
    </foreignObject>
  </svg>
</div>

So just with the native OSD functions it works. Consider putting a “will-change: transform” on text elements to avoid shaking when zooming.

I haven't yet taken the time to test by adding a lot of content. Knowing that with the OSD html-overlay plugin on iPhone 12 mini, the site lags/crash using zoom (a lot of content to resize).

I will update this thread as time goes on.