Responsive font size

[elliottmangham]

Hey,

I am trying to make my blotter.js text responsive, using something like the below CSS,
that ordinarily works:

font-size: calc(30px + 56 * ((100vw - 420px) / 860));

Because the size is declared in Javascript (currently set to 94), I haven't been able to apply the above.

I'm hoping for something like this:

var text = new Blotter.Text("Hello", {
        family : "serif",
        size :"calc(30px + 56 * ((100vw - 420px) / 860))",
        fill : "#171717"
});

Please can you advise?

Thank you!

[barbudour]

Hi, I just took the height of the window and thought about it

var textvh = $(window).innerHeight() * 0.0533; // 5.33 vh

var text = new Blotter.Text("Эксперты", {
    family : "'TT Jenevers', serif",
    weight: 300,
    size : textvh,
    fill : "#000000"
  });

[bradley]

Unfortunately youre correct, because of how blotter is built you wont be able to make the font sizes responsive as attempted in either of the above examples.

When a Blotter instance is initialized for a material and a text (or array of texts), the texts are drawn into a single "back buffer" image which is then collectively rendered on all draw calls. For example, if you gave a Blotter instance a material and 50 texts, all 50 texts would be rendered at once every frame, rather that 50 renders per frame. This has a performative advantage, but also means that Blotter has taken the opinion that continuously re-accounting for text size (as declared in the text's properties object at instantiation time) is disadvantageous.

There is however a possible solution for you all: set the needsUpdate property to true on either the individual text instance or on the material instance youve given to your Blotter instance. From the documentation for Blotter.Text:

needsUpdate text.needsUpdate = true

Rarely, you may need to perform actions on your instances of Blotter.Text that require it to tell the instance of Blotter to repeat important preparatory steps necessary for rendering the instance's texts. To do so, set the value of text.needsUpdate to true and the instance will take care of the rest. You can listen for the Blotter instance's update event if you need to do any work after the update has completed.

Keep in mind that this is costly performance wise and you are advised not to do this on every window resize event. Rather, my advice would be to do this after specific window size breakpoints. This may not fit your specific needs. If you really need your blotter texts to resize smoothly, scaling along with some other element, another approach may be to simply hook into the Blotter.RenderScope for your text and add css to the domElement from there (which is the canvas the text has been rendered into).

Hope this helps.

[briannalh]

Hi @bradley !

Would you be able to elaborate a bit more on how the needsupdate property should be used? Trying to create mobile responsivity here.

Current code in my script:

`var text = new Blotter.Text("Brianna Hawkins", {
family : "'Gascogne Serial', serif",
size : 138,
weight : 300,
fill : "#fff",
paddingLeft : 120,
paddingRight : 120,
});

text.needsUpdate = true;

var material = new Blotter.LiquidDistortMaterial();

material.uniforms.uSpeed.value = .2;

material.uniforms.uVolatility.value = .05;

material.uniforms.uSeed.value = 1;

var blotter = new Blotter(material, {
texts : text
});

var elem = document.getElementById("one");
var scope = blotter.forText(text);

scope.appendTo(elem);

document.onmousemove = function distort(){
material.uniforms.uVolatility.value = (event.clientY * .0006);;
}
`

[Akohjesse]

Well here's how i handle mine

I calculating a new font and padding size based off the windows width on resize

let size = Math.min(Math.max(window.innerWidth * 0.13, 30), 120);
   let padding = Math.min(Math.max(window.innerWidth * 0.05, 50), 150);

   const createBlotter = (size, scene, padding) => {
       const text = new Blotter.Text("Yusuf KanBai", {
           family: "Playfair Display",
           size: size,
           fill: "#fbf8f4",
           paddingLeft: padding,
           paddingRight: padding,
           weight: 800,
       });

       let material = new Blotter.LiquidDistortMaterial();
       material.uniforms.uSpeed.value = 0.4;
       material.uniforms.uVolatility.value = 0.04;
       material.uniforms.uSeed.value = 0.5;

       let blotter = new Blotter(material, {
           texts: text,
       });
       blotter.needsUpdate = true;
       let scope = blotter.forText(text);

       scope.appendTo(scene);
   };

   createBlotter(size, scene.value, padding);

   window.addEventListener("resize", () => {
       let newSize = Math.min(Math.max(window.innerWidth * 0.13, 50), 120);
       let newPadding = Math.min(Math.max(window.innerWidth * 0.08, 50), 150);

       if (newSize !== size || newPadding !== padding) {
           size = newSize;
           padding = newPadding;
           scene.value.innerHTML = "";
           createBlotter(size, scene.value, padding);
       }
   });

[mertsahin89]

I found a very easy solution for this if anyone interested.

let fontsize = window.innerWidth/25

....
...

 let nameText = new Blotter.Text("MERT",{
        family:"Orbitron",
        size: fontsize, 
        fill:"#fff",
        paddingTop:0,
        paddingBottom:0,
        leading : 0.8

      }