@shotstack/shotstack-canvas 1.3.7 → 1.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/entry.node.cjs +8 -4
  2. package/dist/entry.node.js +8 -4
  3. package/dist/entry.web.js +8 -4
  4. package/package.json +1 -1
package/dist/entry.node.cjs CHANGED
@@ -777,18 +777,21 @@ async function buildDrawOps(p) {
777
777
  if (p.lines.length === 0) return ops;
778
778
  const upem = Math.max(1, await p.getUnitsPerEm());
779
779
  const scale = p.font.size / upem;
780
- const blockHeight = p.lines[p.lines.length - 1].y;
780
+ const numLines = p.lines.length;
781
+ const lineHeightPx = p.font.size * p.style.lineHeight;
781
782
  let blockY;
782
783
  switch (p.align.vertical) {
783
784
  case "top":
784
785
  blockY = p.font.size;
785
786
  break;
786
787
  case "bottom":
787
- blockY = p.textRect.height - blockHeight + p.font.size;
788
+ blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
788
789
  break;
789
790
  case "middle":
790
791
  default:
791
- blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
792
+ const capHeightRatio = 0.35;
793
+ const visualOffset = p.font.size * capHeightRatio;
794
+ blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
792
795
  break;
793
796
  }
794
797
  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -809,7 +812,8 @@ async function buildDrawOps(p) {
809
812
  break;
810
813
  }
811
814
  let xCursor = lineX;
812
- const baselineY = blockY + line.y - p.font.size;
815
+ const lineIndex = p.lines.indexOf(line);
816
+ const baselineY = blockY + lineIndex * lineHeightPx;
813
817
  for (const glyph of line.glyphs) {
814
818
  const path = await p.glyphPathProvider(glyph.id);
815
819
  if (!path || path === "M 0 0") {
package/dist/entry.node.js CHANGED
@@ -738,18 +738,21 @@ async function buildDrawOps(p) {
738
738
  if (p.lines.length === 0) return ops;
739
739
  const upem = Math.max(1, await p.getUnitsPerEm());
740
740
  const scale = p.font.size / upem;
741
- const blockHeight = p.lines[p.lines.length - 1].y;
741
+ const numLines = p.lines.length;
742
+ const lineHeightPx = p.font.size * p.style.lineHeight;
742
743
  let blockY;
743
744
  switch (p.align.vertical) {
744
745
  case "top":
745
746
  blockY = p.font.size;
746
747
  break;
747
748
  case "bottom":
748
- blockY = p.textRect.height - blockHeight + p.font.size;
749
+ blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
749
750
  break;
750
751
  case "middle":
751
752
  default:
752
- blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
753
+ const capHeightRatio = 0.35;
754
+ const visualOffset = p.font.size * capHeightRatio;
755
+ blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
753
756
  break;
754
757
  }
755
758
  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -770,7 +773,8 @@ async function buildDrawOps(p) {
770
773
  break;
771
774
  }
772
775
  let xCursor = lineX;
773
- const baselineY = blockY + line.y - p.font.size;
776
+ const lineIndex = p.lines.indexOf(line);
777
+ const baselineY = blockY + lineIndex * lineHeightPx;
774
778
  for (const glyph of line.glyphs) {
775
779
  const path = await p.glyphPathProvider(glyph.id);
776
780
  if (!path || path === "M 0 0") {
package/dist/entry.web.js CHANGED
@@ -743,18 +743,21 @@ async function buildDrawOps(p) {
743
743
  if (p.lines.length === 0) return ops;
744
744
  const upem = Math.max(1, await p.getUnitsPerEm());
745
745
  const scale = p.font.size / upem;
746
- const blockHeight = p.lines[p.lines.length - 1].y;
746
+ const numLines = p.lines.length;
747
+ const lineHeightPx = p.font.size * p.style.lineHeight;
747
748
  let blockY;
748
749
  switch (p.align.vertical) {
749
750
  case "top":
750
751
  blockY = p.font.size;
751
752
  break;
752
753
  case "bottom":
753
- blockY = p.textRect.height - blockHeight + p.font.size;
754
+ blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
754
755
  break;
755
756
  case "middle":
756
757
  default:
757
- blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
758
+ const capHeightRatio = 0.35;
759
+ const visualOffset = p.font.size * capHeightRatio;
760
+ blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
758
761
  break;
759
762
  }
760
763
  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -775,7 +778,8 @@ async function buildDrawOps(p) {
775
778
  break;
776
779
  }
777
780
  let xCursor = lineX;
778
- const baselineY = blockY + line.y - p.font.size;
781
+ const lineIndex = p.lines.indexOf(line);
782
+ const baselineY = blockY + lineIndex * lineHeightPx;
779
783
  for (const glyph of line.glyphs) {
780
784
  const path = await p.glyphPathProvider(glyph.id);
781
785
  if (!path || path === "M 0 0") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shotstack/shotstack-canvas",
3
- "version": "1.3.7",
3
+ "version": "1.3.8",
4
4
  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
5
5
  "type": "module",
6
6
  "main": "./dist/entry.node.cjs",