diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts
index e4399a1d61a..c6e6e987eba 100644
--- a/packages/calcite-components/src/utils/dom.ts
+++ b/packages/calcite-components/src/utils/dom.ts
@@ -81,6 +81,19 @@ export function getElementProp(el: Element, attribute: string, fallbackValue: an
return closest ? closest.getAttribute(attribute) : fallbackValue;
}
+/**
+ * This helper returns the computed width in pixels of a rendered HTMLElement.
+ *
+ * @param {HTMLElement} el An element.
+ * @returns {number} The element's width.
+ */
+export function getElementWidth(el: HTMLElement): number {
+ if (!el) {
+ return 0;
+ }
+ return parseFloat(getComputedStyle(el).inlineSize);
+}
+
/**
* This helper returns the rootNode of an element.
*
@@ -102,6 +115,23 @@ export function getShadowRootNode(el: Element): ShadowRoot | null {
return "host" in rootNode ? rootNode : null;
}
+/**
+ * This helper returns the computed width in pixels a given text string takes up on screen.
+ *
+ * See https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript
+ *
+ * @param {string} text The string of text to measure.
+ * @param {string} font The CSS font attribute's value, which should include size and face, e.g. "12px Arial".
+ */
+export function getTextWidth(text: string, font: string): number {
+ if (!text) {
+ return 0;
+ }
+ const canvas = document.createElement("canvas");
+ const context = canvas.getContext("2d");
+ context.font = font;
+ return context.measureText(text).width;
+}
/**
* This helper returns the host of a ShadowRoot.
*