mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 01:56:04 +00:00
docs(registry): add caption catalog pages and overflow protection
- Add 15 .mdx doc pages under docs/catalog/components/ for all caption styles - Add "Captions" group as first section in the Catalog tab navigation - Add canvas-based fitFontSize to 14 caption components to prevent text overflow - Fix parallax-layers vertical clipping by repositioning the behind safe zone - Re-render all 15 preview videos at high quality and upload to CDN
This commit is contained in:
+16
-1
@@ -106,6 +106,19 @@
|
||||
(function () {
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
var _fitCanvas = document.createElement("canvas");
|
||||
var _fitCtx = _fitCanvas.getContext("2d");
|
||||
function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
|
||||
var size = baseFontSize;
|
||||
var minSize = Math.floor(baseFontSize * 0.45);
|
||||
while (size > minSize) {
|
||||
_fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
|
||||
if (_fitCtx.measureText(text).width <= maxWidth) return size;
|
||||
size -= 2;
|
||||
}
|
||||
return minSize;
|
||||
}
|
||||
|
||||
var WORDS = [
|
||||
{ text: "Every", start: 0.0, end: 0.3 },
|
||||
{ text: "great", start: 0.3, end: 0.55 },
|
||||
@@ -158,6 +171,8 @@
|
||||
|
||||
GROUPS.forEach(function (g, gi) {
|
||||
var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
|
||||
var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
|
||||
var fontSize = fitFontSize(groupText, 96, "900", "'Outfit', sans-serif", 1760);
|
||||
var grp = document.createElement("div");
|
||||
grp.className = "ne-group";
|
||||
grp.id = "ne-grp-" + gi;
|
||||
@@ -168,7 +183,7 @@
|
||||
span.className = "ne-word";
|
||||
span.id = "ne-w-" + wi;
|
||||
span.textContent = w.text;
|
||||
span.style.fontSize = "96px";
|
||||
span.style.fontSize = fontSize + "px";
|
||||
grp.appendChild(span);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user