Google slides - AUTOFIT_TEXT alternative - calculate based on dimensions of element - node.js

Question

The google slides API documentation says on shapes/text elements it can accept "AUTOFIT_TEXT" as an autofit type, however this simply doesn't work and the API throws an error saying "autofitType can only be set to NONE", see here
My alternate pathway solution here is to attempt to come up with a method that can recalculate or estimate the font-size needed for the width of the element in question.
How would I go about doing this?
The font size could be anything it doesn't matter, I just need the text I'm replacing in the element to NOT wrap.
Simply just duplicating the slide with the API resets all the auto fit options already set in the google slide template.
Let's say the string length is "Hi-dilly-ho, neighborinos!", which has a length of 26, and let's say the width of the element is say 200PX. I'd need to come up with a method to fit the text on one line!
There could simply be a magic number I come up with here and multiply that by the length of the string which may work, but i was wondering if there's a nicer way with nodejs that anyone can think of

Answer 1

As i couldn't find a good example of this anywhere, i wrote a method to re-calculate the font-size based on the dimensions of the input element from the Google Presentation.
This workaround calculates the size of the element (width and height) and using node canvas, i created a text element and measure the size of the text which works for multiline text as well.
This is NOT as smart as the default autofit inside gslides, as it bases the amount of chars that can fit of the W key as it's the widest key usually in font faces.
There's a few helpers i've created here which are used by the main function:
// An English Metric Unit (EMU) is defined as 1/360,000 of a centimeter and thus there are 914,400 EMUs per inch, and 12,700 EMUs per point.
export const convertEMUToPT = (emu: number): number => emu / 12700;
// convert pixles to PT, there is 0.75pt to a px
export const covertPXtoPT = (px: number): number => px * 0.75;
// convert PT to PX, there is 0.75pt to a px
export const convertPTtoPX = (px: number): number => px / 0.75;
// this is a very simple example of what i have, obviously you'll need error handling if those values don't exist
// The below will return the dimensions in EMU, to convert to PT divide the EMU value by `12700`
export function getElementSize(element: slides_v1.Schema$PageElement) {
const width = element?.size?.width?.magnitude * element.transform?.scaleX;
const height = element?.size?.height?.magnitude * element.transform?.scaleY;
return { width, height };
}
/**
* #name findByKey
* #description This was introduced as the fontWeight key for example could be on a mixture of elements, and we
* want to find them whereever they may be on the element so we can average out the values
* #function
* #param obj - any object to search
* #param kee - representing the needle to search
* #returns any - returns the value by the key if found
*/
export const findByKey = (obj: any, kee: string): any | undefined => {
if (kee in obj) {
return obj[kee];
}
for (const n of Object.values(obj).filter(Boolean).filter(v => typeof v === 'object')) {
const found = findByKey(n, kee);
if (typeof found !== 'undefined') {
return found;
}
}
};
/**
* #name splitter
* #description Based on the maximum allowed characters on a single line, we split the lines
* based on this value so we can calculate multi line text wrapping and adjust the font size
* continually within a while loop
* #function
* #param str - the input string
* #param l - the length of each "line" of text
* #returns string[] - an array of strings representing each new line of text
*/
export function splitter(str: string, l: number): string[] {
const strs = [];
while (str.length > l) {
let pos = str.substring(0, l).lastIndexOf(' ');
pos = pos <= 0 ? l : pos;
strs.push(str.substring(0, pos));
let i = str.indexOf(' ', pos) + 1;
if (i < pos || i > pos + l)
i = pos;
str = str.substring(i);
}
strs.push(str);
return strs;
}
import { createCanvas } from 'canvas';
export function calculateFontSize(element: slides_v1.Schema$PageElement, text: string): number {
// get the dimensions of the element
const size = getElementSize(element, false);
// create a canvas with the same size as the element, this most likely does not matter as we're only measureing a fake
// representation of the text with ctx.measureText
const canvas = createCanvas(convertPTtoPX(size.width), convertPTtoPX(size.height));
const ctx = canvas.getContext('2d');
// try to extract all the font-sizes
const fontSizes = element.shape?.text?.textElements?.map(textElement => textElement.textRun?.style?.fontSize?.magnitude).filter((a): a is number => isNumber(a)) ?? [];
// try to extract all the font-weights
const fontWeights = element.shape?.text?.textElements?.map(textElement => textElement.textRun?.style?.weightedFontFamily?.weight).filter((a): a is number => isNumber(a)) ?? [];
// fallback to arial if not found, if there's more than one fontFamily used in a single element, we just pick the first one, no way i can think of
// to be smart here and not really necessary to create multiple strings with different fonts and calculate those, this seems to work fine
const fontFamily = findByKey(element, 'fontFamily') ?? 'Arial';
// calulate the average as there can be different fonts with different weights within a single text element
const averageFontWeight = fontWeights.reduce((a, n) => a + n, 0) / fontWeights.length;
const averageFontSize = fontSizes.reduce((a, n) => a + n, 0) / fontSizes.length;
// if the average font-weight is not a number, usae the default
const fontWeight = isNaN(averageFontWeight) ? DEFAULT_FONT_WEIGHT : averageFontWeight;
// use the average fontSize if available, else start at an arbitrary default
let fontSize = isNaN(averageFontSize) ? DEFAULT_FONT_SIZE : averageFontSize;
// if the input value is an empty string, don't bother with any calculations
if (text.length === 0) {
return fontSize;
}
// create the initial font value, this is overwritten during the while loop
ctx.font = `${fontWeight} ${fontSize}pt ${fontFamily}`;
// max chars we will fit horizontally based on the char width of W
const getCharWidth = (): number => convertPTtoPX(size.width) / ctx.measureText('W').width;
// used for the while loop, to continually resize the shape and multiline text, until it fits within the bounds
// of the element
const isOutsideBounds = (): boolean => {
// based on the maximum amount of chars available in the horizontal axis for this font size
// we split onto a new line to get the width/height correctly
const multiLineString = splitter(text, getCharWidth()).join('\n');
// get the measurements of the current multiline string
const metrics = ctx.measureText(multiLineString);
// get the width in PT
const width = covertPXtoPT(metrics.width);
// the emAcent/Decent values do exist, it's the types that are wrong from canvas
// #ts-expect-error
const emAcent = metrics.emHeightAscent as number;
// #ts-expect-error
const emDecent = metrics.emHeightDescent as number;
const height = covertPXtoPT(emAcent + emDecent);
return width > size.width || height > size.height;
};
// continually loop over until the size of the text element is less than the intiial size of the element in gslides
while (isOutsideBounds()) {
// decrease by 0.1 incrememnts until it fits within the width
fontSize = fontSize - 0.1;
// update the ctx with the new font style (shrinking the font size)
ctx.font = `${fontWeight} ${fontSize}pt ${fontFamily}`;
}
// returns the font size
return fontSize;
}
Then to use for a request to update the text after the text is inserted/replaced:
{
updateTextStyle: {
objectId: pageElement.objectId,
fields: 'fontSize',
style: {
fontSize: {
magnitude: calculateFontSize(pageElement, STRING_VALUE_HERE),
unit: 'PT'
}
}
}
}