modern-text 0.1.6 → 0.1.7

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class p{get left(){return this.x}get top(){return this.y}get right(){return this.x+this.width}get bottom(){return this.y+this.height}constructor({x:t=0,y:o=0,width:h=0,height:s=0}={}){this.x=t,this.y=o,this.width=h,this.height=s}static from(...t){const o=t[0],h=t.slice(1).reduce((s,a)=>(s.x=Math.min(s.x,a.x),s.y=Math.min(s.y,a.y),s.right=Math.max(s.right,a.right),s.bottom=Math.max(s.bottom,a.bottom),s),{x:o.x,y:o.y,right:o.right,bottom:o.bottom});return new p({x:h.x,y:h.y,width:h.right-h.x,height:h.bottom-h.y})}move(t,o){return this.x+=t,this.y+=o,this}clone(){return new p({x:this.x,y:this.y,width:this.width,height:this.height})}}class R{constructor({content:t="",style:o,parent:h,contentBox:s=new p,inlineBox:a=new p,glyphBox:l=new p,centerX:f=0,baseline:b=0}={}){switch(this.content=t,this.style=o,this.parent=h,this.contentBox=s,this.inlineBox=a,this.glyphBox=l,this.centerX=f,this.baseline=b,this.getComputedStyle().textTransform){case"uppercase":this.content=this.content.toUpperCase();break;case"lowercase":this.content=this.content.toLowerCase();break}}getComputedStyle(){var t;return{...(t=this.parent)==null?void 0:t.getComputedStyle(),...this.style}}clone(t){return new R({content:this.content,style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),inlineBox:this.inlineBox.clone(),glyphBox:this.glyphBox.clone(),centerX:this.centerX,baseline:this.baseline,...t})}}class M{constructor({style:t,parent:o,contentBox:h=new p,lineBox:s=new p,glyphBox:a=new p,baseline:l=0,xHeight:f=0,maxCharWidth:b=0,fragments:u=[]}={}){this.style=t,this.parent=o,this.contentBox=h,this.lineBox=s,this.glyphBox=a,this.baseline=l,this.xHeight=f,this.maxCharWidth=b,this.fragments=u}addFragment(t){return this.fragments.push(new R({...t,parent:this})),this}getComputedStyle(){return{...this.parent,...this.style}}clone(t){return new M({style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),lineBox:this.lineBox.clone(),glyphBox:this.glyphBox.clone(),baseline:this.baseline,xHeight:this.xHeight,maxCharWidth:this.maxCharWidth,fragments:this.fragments.map(o=>o.clone()),...t})}}function D(r,t){const o=[];if(typeof r=="string")o.push(new M({parent:t}).addFragment({content:r}));else{r=Array.isArray(r)?r:[r];for(const h of r)if(typeof h=="string")o.push(new M({parent:t}).addFragment({content:h}));else if(Array.isArray(h)){const s=new M({parent:t});h.forEach(a=>{if(typeof a=="string")s.addFragment({content:a});else{const{content:l,...f}=a;s.addFragment({content:l,style:f})}}),o.push(s)}else if("fragments"in h){const{fragments:s,...a}=h,l=new M({style:a,parent:t});s.forEach(f=>{const{content:b,...u}=f;l.addFragment({content:b,style:u})}),o.push(l)}else if("content"in h){const{content:s,...a}=h;o.push(new M({style:a,parent:t}).addFragment({content:s}))}}return o}const L="OffscreenCanvas"in globalThis;let N;function K(){return N??(N=L?new OffscreenCanvas(1,1):document.createElement("canvas"))}function z(r,t){switch(t.shadowColor&&(r.shadowColor=t.shadowColor),t.shadowOffsetX!==void 0&&(r.shadowOffsetX=t.shadowOffsetX),t.shadowOffsetY!==void 0&&(r.shadowOffsetY=t.shadowOffsetY),t.shadowBlur!==void 0&&(r.shadowBlur=t.shadowBlur),t.textStrokeColor&&(r.strokeStyle=t.textStrokeColor),t.textStrokeWidth!==void 0&&(r.lineWidth=t.textStrokeWidth),t.color&&(r.fillStyle=t.color),t.textAlign&&(r.textAlign=t.textAlign),t.fontKerning&&(r.fontKerning=t.fontKerning),t.verticalAlign){case"baseline":r.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":r.textBaseline=t.verticalAlign;break}t.letterSpacing!==void 0&&(r.letterSpacing=`${t.letterSpacing}px`),(t.fontStyle||t.fontWeight!==void 0||t.fontSize!==void 0||t.fontFamily)&&(r.font=[t.fontStyle||"normal",t.fontWeight||"normal",`${t.fontSize||14}px`,t.fontFamily||"sans-serif"].join(" "))}function F(r,t){const o=K().getContext("2d");return z(o,t),o.measureText(r)}const j=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;function G(r,t,o){const h=[],s=r.slice();let a,l;for(;a=s.shift();){const f=a.fragments.slice();let b=0;const u=[];for(;l=f.shift();){const C=l.getComputedStyle();let S="",k=!1,e=0,i="";for(const B of l.content){if(a.maxCharWidth=Math.max(a.maxCharWidth,F(B,{...C,letterSpacing:0}).width),i+=B,j.test(l.content[++e]))continue;let m,x;switch(C.writingMode){case"vertical-lr":case"vertical-rl":m=o,x=i.length*C.fontSize;break;case"horizontal-tb":default:m=t,x=F(i,{...C,letterSpacing:0}).width;break}x+=i.length*C.letterSpacing;const w=/^[\r\n]$/.test(i);if(w||C.textWrap==="wrap"&&m&&b+x>m){let n=w?S.length+1:S.length;!b&&!n&&(S+=i,n+=i.length),S.length&&u.push(l.clone({content:S})),u.length&&(h.push(a.clone({fragments:u.slice()})),u.length=0);const d=l.content.substring(n);(d.length||f.length)&&s.unshift(a.clone({maxCharWidth:0,fragments:(d.length?[l.clone({content:d})]:[]).concat(f.slice())})),f.length=0,k=!0;break}else b+=x;S+=i,i=""}k||u.push(l.clone())}u.length&&h.push(a.clone({fragments:u}))}return h}function U(r){return{width:0,height:0,color:null,backgroundColor:null,fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textTransform:"none",textDecoration:null,textStrokeWidth:0,textStrokeColor:null,lineHeight:1,letterSpacing:0,shadowColor:null,shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,writingMode:"horizontal-tb",...r}}function $(r){const{content:t}=r,{width:o,height:h,...s}=U(r.style);let a=D(t,s);a=G(a,o,h);let l=a.reduce((e,i)=>e+i.maxCharWidth*i.getComputedStyle().lineHeight,0),f=0,b=0;a.forEach(e=>{const i=[];let B=null,m=f,x=b;e.fragments.forEach((n,d)=>{const g=n.getComputedStyle();switch(g.writingMode){case"vertical-rl":case"vertical-lr":{const c=e.maxCharWidth,y=c*g.lineHeight;d||(x=0,g.writingMode==="vertical-rl"&&(l-=y,m=l));const W=n.content.length,v=W*g.fontSize+(W-1)*g.letterSpacing;n.contentBox.x=m+(y-c)/2,n.contentBox.y=x,n.contentBox.width=c,n.contentBox.height=v,n.inlineBox.x=m,n.inlineBox.y=x,n.inlineBox.width=y,n.inlineBox.height=v,n.glyphBox.x=m+(y-c)/2,n.glyphBox.y=x,n.glyphBox.width=c,n.glyphBox.height=v,n.baseline=0,n.centerX=m+y/2,x+=v+g.letterSpacing;break}case"horizontal-tb":{d||(m=0);const{fontBoundingBoxAscent:c,fontBoundingBoxDescent:y,actualBoundingBoxAscent:W,actualBoundingBoxDescent:v,actualBoundingBoxLeft:A,actualBoundingBoxRight:T,width:E}=F(n.content,{...g,textAlign:"center",verticalAlign:"baseline"}),H=g.fontSize,O=H*g.lineHeight,Y=x+(O-(c+y))/2+c;n.contentBox.x=m,n.contentBox.y=x+(O-H)/2,n.contentBox.width=E,n.contentBox.height=H,n.inlineBox.x=m,n.inlineBox.y=x,n.inlineBox.width=E,n.inlineBox.height=O,n.glyphBox.x=m,n.glyphBox.y=Y-W,n.glyphBox.width=A+T,n.glyphBox.height=W+v,n.baseline=Y,n.centerX=m+A,i.push(n.contentBox),e.contentBox=p.from(...i),e.contentBox.height<n.contentBox.height&&(B=n),m+=E;break}}}),e.lineBox=p.from(...e.fragments.map(n=>n.inlineBox)),f+=e.lineBox.width,b+=e.lineBox.height;const w=F("x",{...(B??e).getComputedStyle(),textAlign:"left",verticalAlign:"baseline"});e.xHeight=w.actualBoundingBoxAscent,e.baseline=e.lineBox.y+(e.lineBox.height-(w.fontBoundingBoxAscent+w.fontBoundingBoxDescent))/2+w.fontBoundingBoxAscent});const u=p.from(...a.map(e=>e.lineBox),new p({width:o,height:h})),{width:C,height:S}=u;a.forEach(e=>{e.contentBox=p.from(...e.fragments.map(i=>i.contentBox)),e.glyphBox=p.from(...e.fragments.map(i=>i.glyphBox)),e.fragments.forEach(i=>{const B=i.getComputedStyle(),m=i.inlineBox.x,x=i.inlineBox.y;let w=m,n=x;switch(B.writingMode){case"vertical-rl":case"vertical-lr":switch(B.textAlign){case"end":case"right":n+=S-e.contentBox.height;break;case"center":n+=(S-e.contentBox.height)/2;break}break;case"horizontal-tb":{switch(B.textAlign){case"end":case"right":w+=C-e.contentBox.width;break;case"center":w+=(C-e.contentBox.width)/2;break}switch(B.verticalAlign){case"top":n+=e.lineBox.y-i.inlineBox.y;break;case"middle":n=e.baseline-e.xHeight/2-i.inlineBox.height/2;break;case"bottom":n+=e.lineBox.bottom-i.inlineBox.bottom;break;case"sub":n+=e.baseline-i.glyphBox.bottom;break;case"super":n+=e.baseline-i.glyphBox.y;break;case"text-top":n+=e.glyphBox.y-i.inlineBox.y;break;case"text-bottom":n+=e.glyphBox.bottom-i.inlineBox.bottom;break;case"baseline":default:i.inlineBox.height<e.lineBox.height&&(n+=e.baseline-i.baseline);break}break}}const d=w-m,g=n-x;i.inlineBox.move(d,g),i.contentBox.move(d,g),i.glyphBox.move(d,g),i.baseline+=g,i.centerX+=d}),e.contentBox=p.from(...e.fragments.map(i=>i.contentBox)),e.glyphBox=p.from(...e.fragments.map(i=>i.glyphBox))});const k=p.from(...a.map(e=>e.contentBox));return{box:u,contentBox:k,viewBox:p.from(u,k),glyphBox:p.from(...a.map(e=>e.glyphBox)),paragraphs:a}}function P(r,t,o){if(typeof t=="string"&&t.startsWith("linear-gradient")){const{x0:h,y0:s,x1:a,y1:l,stops:f}=I(t,o.left,o.top,o.width,o.height),b=r.createLinearGradient(h,s,a,l);return f.forEach(u=>b.addColorStop(u.offset,u.color)),b}return t}function I(r,t,o,h,s){var e;const a=((e=r.match(/linear-gradient\((.+)\)$/))==null?void 0:e[1])??"",l=a.split(",")[0],f=l.includes("deg")?l:"0deg",b=a.replace(f,"").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi),C=(Number(f.replace("deg",""))||0)*Math.PI/180,S=h*Math.sin(C),k=s*Math.cos(C);return{x0:t+h/2-S,y0:o+s/2+k,x1:t+h/2+S,y1:o+s/2-k,stops:Array.from(b).map(i=>{let B=i[2];return B.startsWith("(")?B=B.split(",").length>3?`rgba${B}`:`rgb${B}`:B=`#${B}`,{offset:Number(i[3].replace("%",""))/100,color:B}})}}function X(r,t,o){o!=null&&o.color&&(o.color=P(r,o.color,t)),o!=null&&o.backgroundColor&&(o.backgroundColor=P(r,o.backgroundColor,t)),o!=null&&o.textStrokeColor&&(o.textStrokeColor=P(r,o.textStrokeColor,t))}function V(r){const{view:t=document.createElement("canvas"),style:o,draws:h=[],pixelRatio:s=1}=r,a=h.length>0?h:[{}],{box:l,viewBox:f,paragraphs:b}=$(r),{x:u,y:C,width:S,height:k}=f,e=t.getContext("2d"),i=-u+S,B=-C+k;t.style.width=`${i}px`,t.style.height=`${B}px`,t.dataset.width=String(l.width),t.dataset.height=String(l.height),t.dataset.pixelRatio=String(s),t.width=Math.max(1,Math.floor(i*s)),t.height=Math.max(1,Math.floor(B*s)),e.scale(s,s),e.clearRect(0,0,t.width,t.height),e.translate(-u,-C);const m={...o};return X(e,new p({width:S,height:k}),m),b.forEach(x=>{X(e,x.contentBox,x.style),x.fragments.forEach(w=>{X(e,w.contentBox,w.style)})}),a.forEach(x=>{const w={...x};X(e,new p({width:S,height:k}),w);const n={...m,...w};n!=null&&n.backgroundColor&&(e.fillStyle=n.backgroundColor,e.fillRect(0,0,t.width,t.height)),b.forEach(d=>{var g;(g=d.style)!=null&&g.backgroundColor&&(e.fillStyle=d.style.backgroundColor,e.fillRect(d.lineBox.x,d.lineBox.y,d.lineBox.width,d.lineBox.height)),d.fragments.forEach(c=>{var y;(y=c.style)!=null&&y.backgroundColor&&(e.fillStyle=c.style.backgroundColor,e.fillRect(c.inlineBox.x,c.inlineBox.y,c.inlineBox.width,c.inlineBox.height))})}),z(e,n),b.forEach(d=>{d.style&&z(e,d.style),d.fragments.forEach(g=>{z(e,{...g.style,textAlign:"left",verticalAlign:"top"});let{x:c,y,width:W,height:v}=g.contentBox;w.offsetX&&(c+=w.offsetX),w.offsetY&&(y+=w.offsetY);const A={...g.getComputedStyle(),...w};switch(A.writingMode){case"vertical-rl":case"vertical-lr":{let T=0;for(const E of g.content)e.fillText(E,c,y+T),A.textStrokeWidth&&e.strokeText(E,c,y+T),T+=A.fontSize+A.letterSpacing;break}case"horizontal-tb":e.fillText(g.content,c,y),A.textStrokeWidth&&e.strokeText(g.content,c,y);break}switch(A.textDecoration){case"underline":e.beginPath(),e.moveTo(c,y+v-2),e.lineTo(c+W,y+v-2),e.stroke();break;case"line-through":e.beginPath(),e.moveTo(c,y+v/2),e.lineTo(c+W,y+v/2),e.stroke();break}})})}),t}exports.measureText=$;exports.renderText=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class w{get left(){return this.x}get top(){return this.y}get right(){return this.x+this.width}get bottom(){return this.y+this.height}constructor({x:t=0,y:o=0,width:h=0,height:s=0}={}){this.x=t,this.y=o,this.width=h,this.height=s}static from(...t){const o=t[0],h=t.slice(1).reduce((s,a)=>(s.x=Math.min(s.x,a.x),s.y=Math.min(s.y,a.y),s.right=Math.max(s.right,a.right),s.bottom=Math.max(s.bottom,a.bottom),s),{x:o.x,y:o.y,right:o.right,bottom:o.bottom});return new w({x:h.x,y:h.y,width:h.right-h.x,height:h.bottom-h.y})}move(t,o){return this.x+=t,this.y+=o,this}clone(){return new w({x:this.x,y:this.y,width:this.width,height:this.height})}}class P{constructor({content:t="",style:o,parent:h,contentBox:s=new w,inlineBox:a=new w,glyphBox:l=new w,centerX:d=0,baseline:p=0}={}){switch(this.content=t,this.style=o,this.parent=h,this.contentBox=s,this.inlineBox=a,this.glyphBox=l,this.centerX=d,this.baseline=p,this.getComputedStyle().textTransform){case"uppercase":this.content=this.content.toUpperCase();break;case"lowercase":this.content=this.content.toLowerCase();break}}getComputedStyle(){var t;return{...(t=this.parent)==null?void 0:t.getComputedStyle(),...this.style}}clone(t){return new P({content:this.content,style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),inlineBox:this.inlineBox.clone(),glyphBox:this.glyphBox.clone(),centerX:this.centerX,baseline:this.baseline,...t})}}class M{constructor({style:t,parent:o,contentBox:h=new w,lineBox:s=new w,glyphBox:a=new w,baseline:l=0,xHeight:d=0,maxCharWidth:p=0,fragments:f=[]}={}){this.style=t,this.parent=o,this.contentBox=h,this.lineBox=s,this.glyphBox=a,this.baseline=l,this.xHeight=d,this.maxCharWidth=p,this.fragments=f}addFragment(t){return this.fragments.push(new P({...t,parent:this})),this}getComputedStyle(){return{...this.parent,...this.style}}clone(t){return new M({style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),lineBox:this.lineBox.clone(),glyphBox:this.glyphBox.clone(),baseline:this.baseline,xHeight:this.xHeight,maxCharWidth:this.maxCharWidth,fragments:this.fragments.map(o=>o.clone()),...t})}}function D(r,t){const o=[];if(typeof r=="string")o.push(new M({parent:t}).addFragment({content:r}));else{r=Array.isArray(r)?r:[r];for(const h of r)if(typeof h=="string")o.push(new M({parent:t}).addFragment({content:h}));else if(Array.isArray(h)){const s=new M({parent:t});h.forEach(a=>{if(typeof a=="string")s.addFragment({content:a});else{const{content:l,...d}=a;s.addFragment({content:l,style:d})}}),o.push(s)}else if("fragments"in h){const{fragments:s,...a}=h,l=new M({style:a,parent:t});s.forEach(d=>{const{content:p,...f}=d;l.addFragment({content:p,style:f})}),o.push(l)}else if("content"in h){const{content:s,...a}=h;o.push(new M({style:a,parent:t}).addFragment({content:s}))}}return o}const L="OffscreenCanvas"in globalThis;let N;function K(){return N??(N=L?new OffscreenCanvas(1,1):document.createElement("canvas"))}function Y(r,t){switch(t.shadowColor&&(r.shadowColor=t.shadowColor),t.shadowOffsetX!==void 0&&(r.shadowOffsetX=t.shadowOffsetX),t.shadowOffsetY!==void 0&&(r.shadowOffsetY=t.shadowOffsetY),t.shadowBlur!==void 0&&(r.shadowBlur=t.shadowBlur),t.textStrokeColor&&(r.strokeStyle=t.textStrokeColor),t.textStrokeWidth!==void 0&&(r.lineWidth=t.textStrokeWidth),t.color&&(r.fillStyle=t.color),t.textAlign&&(r.textAlign=t.textAlign),t.fontKerning&&(r.fontKerning=t.fontKerning),t.verticalAlign){case"baseline":r.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":r.textBaseline=t.verticalAlign;break}t.letterSpacing!==void 0&&(r.letterSpacing=`${t.letterSpacing}px`),(t.fontStyle||t.fontWeight!==void 0||t.fontSize!==void 0||t.fontFamily)&&(r.font=[t.fontStyle||"normal",t.fontWeight||"normal",`${t.fontSize||14}px`,t.fontFamily||"sans-serif"].join(" "))}function z(r,t){const o=K().getContext("2d");return Y(o,t),o.measureText(r)}const j=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;function G(r,t,o){const h=[],s=r.slice();let a,l;for(;a=s.shift();){const d=a.fragments.slice();let p=0;const f=[];for(;l=d.shift();){const C=l.getComputedStyle();let S="",v=!1,e=0,i="";for(const u of l.content){if(a.maxCharWidth=Math.max(a.maxCharWidth,z(u,{...C,letterSpacing:0}).width),i+=u,j.test(l.content[++e]))continue;let B,c;switch(C.writingMode){case"vertical-lr":case"vertical-rl":B=o,c=i.length*C.fontSize;break;case"horizontal-tb":default:B=t,c=z(i,{...C,letterSpacing:0}).width;break}c+=i.length*C.letterSpacing;const m=/^[\r\n]$/.test(i);if(m||C.textWrap==="wrap"&&B&&p+c>B){let n=m?S.length+1:S.length;!p&&!n&&(S+=i,n+=i.length),S.length&&f.push(l.clone({content:S})),f.length&&(h.push(a.clone({fragments:f.slice()})),f.length=0);const b=l.content.substring(n);(b.length||d.length)&&s.unshift(a.clone({maxCharWidth:0,fragments:(b.length?[l.clone({content:b})]:[]).concat(d.slice())})),d.length=0,v=!0;break}else p+=c;S+=i,i=""}v||f.push(l.clone())}f.length&&h.push(a.clone({fragments:f}))}return h}function U(r){return{width:0,height:0,color:null,backgroundColor:null,fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textTransform:"none",textDecoration:null,textStrokeWidth:0,textStrokeColor:null,lineHeight:1,letterSpacing:0,shadowColor:null,shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,writingMode:"horizontal-tb",...r}}function $(r){const{content:t}=r,{width:o,height:h,...s}=U(r.style);let a=D(t,s);a=G(a,o,h);let l=a.reduce((e,i)=>e+i.maxCharWidth*i.getComputedStyle().lineHeight,0),d=0,p=0;a.forEach(e=>{const i=[];let u=null,B=d,c=p;e.fragments.forEach((n,b)=>{const g=n.getComputedStyle();switch(g.writingMode){case"vertical-rl":case"vertical-lr":{const x=e.maxCharWidth,y=x*g.lineHeight;b||(c=0,g.writingMode==="vertical-rl"&&(l-=y,B=l));const k=n.content.length,A=k*g.fontSize+(k-1)*g.letterSpacing;n.contentBox.x=B+(y-x)/2,n.contentBox.y=c,n.contentBox.width=x,n.contentBox.height=A,n.inlineBox.x=B,n.inlineBox.y=c,n.inlineBox.width=y,n.inlineBox.height=A,n.glyphBox.x=B+(y-x)/2,n.glyphBox.y=c,n.glyphBox.width=x,n.glyphBox.height=A,n.baseline=0,n.centerX=B+y/2,c+=A+g.letterSpacing;break}case"horizontal-tb":{b||(B=0);const{fontBoundingBoxAscent:x,fontBoundingBoxDescent:y,actualBoundingBoxAscent:k,actualBoundingBoxDescent:A,actualBoundingBoxLeft:W,actualBoundingBoxRight:T,width:E}=z(n.content,{...g,textAlign:"center",verticalAlign:"baseline"}),F=g.fontSize,H=F*g.lineHeight,R=c+(H-(x+y))/2+x;n.contentBox.x=B,n.contentBox.y=c+(H-F)/2,n.contentBox.width=E,n.contentBox.height=F,n.inlineBox.x=B,n.inlineBox.y=c,n.inlineBox.width=E,n.inlineBox.height=H,n.glyphBox.x=B,n.glyphBox.y=R-k,n.glyphBox.width=W+T,n.glyphBox.height=k+A,n.baseline=R,n.centerX=B+W,i.push(n.contentBox),e.contentBox=w.from(...i),e.contentBox.height<n.contentBox.height&&(u=n),B+=E;break}}}),e.lineBox=w.from(...e.fragments.map(n=>n.inlineBox)),d+=e.lineBox.width,p+=e.lineBox.height;const m=z("x",{...(u??e).getComputedStyle(),textAlign:"left",verticalAlign:"baseline"});e.xHeight=m.actualBoundingBoxAscent,e.baseline=e.lineBox.y+(e.lineBox.height-(m.fontBoundingBoxAscent+m.fontBoundingBoxDescent))/2+m.fontBoundingBoxAscent});const f=w.from(...a.map(e=>e.lineBox),new w({width:o,height:h})),{width:C,height:S}=f;a.forEach(e=>{e.contentBox=w.from(...e.fragments.map(i=>i.contentBox)),e.glyphBox=w.from(...e.fragments.map(i=>i.glyphBox)),e.fragments.forEach(i=>{const u=i.getComputedStyle(),B=i.inlineBox.x,c=i.inlineBox.y;let m=B,n=c;switch(u.writingMode){case"vertical-rl":case"vertical-lr":switch(u.textAlign){case"end":case"right":n+=S-e.contentBox.height;break;case"center":n+=(S-e.contentBox.height)/2;break}break;case"horizontal-tb":{switch(u.textAlign){case"end":case"right":m+=C-e.contentBox.width;break;case"center":m+=(C-e.contentBox.width)/2;break}switch(u.verticalAlign){case"top":n+=e.lineBox.y-i.inlineBox.y;break;case"middle":n=e.baseline-e.xHeight/2-i.inlineBox.height/2;break;case"bottom":n+=e.lineBox.bottom-i.inlineBox.bottom;break;case"sub":n+=e.baseline-i.glyphBox.bottom;break;case"super":n+=e.baseline-i.glyphBox.y;break;case"text-top":n+=e.glyphBox.y-i.inlineBox.y;break;case"text-bottom":n+=e.glyphBox.bottom-i.inlineBox.bottom;break;case"baseline":default:i.inlineBox.height<e.lineBox.height&&(n+=e.baseline-i.baseline);break}break}}const b=m-B,g=n-c;i.inlineBox.move(b,g),i.contentBox.move(b,g),i.glyphBox.move(b,g),i.baseline+=g,i.centerX+=b}),e.contentBox=w.from(...e.fragments.map(i=>i.contentBox)),e.glyphBox=w.from(...e.fragments.map(i=>i.glyphBox))});const v=w.from(...a.map(e=>e.contentBox));return{box:f,contentBox:v,viewBox:w.from(f,v),glyphBox:w.from(...a.map(e=>e.glyphBox)),paragraphs:a}}function O(r,t,o){if(typeof t=="string"&&t.startsWith("linear-gradient")){const{x0:h,y0:s,x1:a,y1:l,stops:d}=I(t,o.left,o.top,o.width,o.height),p=r.createLinearGradient(h,s,a,l);return d.forEach(f=>p.addColorStop(f.offset,f.color)),p}return t}function I(r,t,o,h,s){var e;const a=((e=r.match(/linear-gradient\((.+)\)$/))==null?void 0:e[1])??"",l=a.split(",")[0],d=l.includes("deg")?l:"0deg",p=a.replace(d,"").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi),C=(Number(d.replace("deg",""))||0)*Math.PI/180,S=h*Math.sin(C),v=s*Math.cos(C);return{x0:t+h/2-S,y0:o+s/2+v,x1:t+h/2+S,y1:o+s/2-v,stops:Array.from(p).map(i=>{let u=i[2];return u.startsWith("(")?u=u.split(",").length>3?`rgba${u}`:`rgb${u}`:u=`#${u}`,{offset:Number(i[3].replace("%",""))/100,color:u}})}}function X(r,t,o){o!=null&&o.color&&(o.color=O(r,o.color,t)),o!=null&&o.backgroundColor&&(o.backgroundColor=O(r,o.backgroundColor,t)),o!=null&&o.textStrokeColor&&(o.textStrokeColor=O(r,o.textStrokeColor,t))}function V(r){const{view:t=document.createElement("canvas"),style:o,draws:h=[],pixelRatio:s=1}=r,a=h.length>0?h:[{}],{box:l,viewBox:d,paragraphs:p}=$(r),{x:f,y:C,width:S,height:v}=d,e=t.getContext("2d"),i=-f+S,u=-C+v;t.style.width=`${i}px`,t.style.height=`${u}px`,t.dataset.width=String(l.width),t.dataset.height=String(l.height),t.dataset.pixelRatio=String(s),t.width=Math.max(1,Math.floor(i*s)),t.height=Math.max(1,Math.floor(u*s)),e.scale(s,s),e.clearRect(0,0,t.width,t.height),e.translate(-f,-C);const B={...o};return X(e,new w({width:S,height:v}),B),p.forEach(c=>{X(e,c.contentBox,c.style),c.fragments.forEach(m=>{X(e,m.contentBox,m.style)})}),a.forEach(c=>{const m={...c};X(e,new w({width:S,height:v}),m);const n={...B,...m};n!=null&&n.backgroundColor&&(e.fillStyle=n.backgroundColor,e.fillRect(0,0,t.width,t.height)),p.forEach(b=>{var g;(g=b.style)!=null&&g.backgroundColor&&(e.fillStyle=b.style.backgroundColor,e.fillRect(b.lineBox.x,b.lineBox.y,b.lineBox.width,b.lineBox.height)),b.fragments.forEach(x=>{var y;(y=x.style)!=null&&y.backgroundColor&&(e.fillStyle=x.style.backgroundColor,e.fillRect(x.inlineBox.x,x.inlineBox.y,x.inlineBox.width,x.inlineBox.height))})}),p.forEach(b=>{b.fragments.forEach(g=>{const x={...g.getComputedStyle(),...m};Y(e,{...x,textAlign:"left",verticalAlign:"top"});let{x:y,y:k,width:A,height:W}=g.contentBox;switch(m.offsetX&&(y+=m.offsetX),m.offsetY&&(k+=m.offsetY),x.writingMode){case"vertical-rl":case"vertical-lr":{let T=0;for(const E of g.content)e.fillText(E,y,k+T),x.textStrokeWidth&&e.strokeText(E,y,k+T),T+=x.fontSize+x.letterSpacing;break}case"horizontal-tb":e.fillText(g.content,y,k),x.textStrokeWidth&&e.strokeText(g.content,y,k);break}switch(x.textDecoration){case"underline":e.beginPath(),e.moveTo(y,k+W-2),e.lineTo(y+A,k+W-2),e.stroke();break;case"line-through":e.beginPath(),e.moveTo(y,k+W/2),e.lineTo(y+A,k+W/2),e.stroke();break}})})}),t}exports.measureText=$;exports.renderText=V;

package/dist/index.js

@@ -1 +1 @@
-(function(T,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(T=typeof globalThis<"u"?globalThis:T||self,c(T.modernText={}))})(this,function(T){"use strict";class c{get left(){return this.x}get top(){return this.y}get right(){return this.x+this.width}get bottom(){return this.y+this.height}constructor({x:t=0,y:o=0,width:h=0,height:s=0}={}){this.x=t,this.y=o,this.width=h,this.height=s}static from(...t){const o=t[0],h=t.slice(1).reduce((s,a)=>(s.x=Math.min(s.x,a.x),s.y=Math.min(s.y,a.y),s.right=Math.max(s.right,a.right),s.bottom=Math.max(s.bottom,a.bottom),s),{x:o.x,y:o.y,right:o.right,bottom:o.bottom});return new c({x:h.x,y:h.y,width:h.right-h.x,height:h.bottom-h.y})}move(t,o){return this.x+=t,this.y+=o,this}clone(){return new c({x:this.x,y:this.y,width:this.width,height:this.height})}}class O{constructor({content:t="",style:o,parent:h,contentBox:s=new c,inlineBox:a=new c,glyphBox:l=new c,centerX:u=0,baseline:b=0}={}){switch(this.content=t,this.style=o,this.parent=h,this.contentBox=s,this.inlineBox=a,this.glyphBox=l,this.centerX=u,this.baseline=b,this.getComputedStyle().textTransform){case"uppercase":this.content=this.content.toUpperCase();break;case"lowercase":this.content=this.content.toLowerCase();break}}getComputedStyle(){var t;return{...(t=this.parent)==null?void 0:t.getComputedStyle(),...this.style}}clone(t){return new O({content:this.content,style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),inlineBox:this.inlineBox.clone(),glyphBox:this.glyphBox.clone(),centerX:this.centerX,baseline:this.baseline,...t})}}class M{constructor({style:t,parent:o,contentBox:h=new c,lineBox:s=new c,glyphBox:a=new c,baseline:l=0,xHeight:u=0,maxCharWidth:b=0,fragments:B=[]}={}){this.style=t,this.parent=o,this.contentBox=h,this.lineBox=s,this.glyphBox=a,this.baseline=l,this.xHeight=u,this.maxCharWidth=b,this.fragments=B}addFragment(t){return this.fragments.push(new O({...t,parent:this})),this}getComputedStyle(){return{...this.parent,...this.style}}clone(t){return new M({style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),lineBox:this.lineBox.clone(),glyphBox:this.glyphBox.clone(),baseline:this.baseline,xHeight:this.xHeight,maxCharWidth:this.maxCharWidth,fragments:this.fragments.map(o=>o.clone()),...t})}}function L(r,t){const o=[];if(typeof r=="string")o.push(new M({parent:t}).addFragment({content:r}));else{r=Array.isArray(r)?r:[r];for(const h of r)if(typeof h=="string")o.push(new M({parent:t}).addFragment({content:h}));else if(Array.isArray(h)){const s=new M({parent:t});h.forEach(a=>{if(typeof a=="string")s.addFragment({content:a});else{const{content:l,...u}=a;s.addFragment({content:l,style:u})}}),o.push(s)}else if("fragments"in h){const{fragments:s,...a}=h,l=new M({style:a,parent:t});s.forEach(u=>{const{content:b,...B}=u;l.addFragment({content:b,style:B})}),o.push(l)}else if("content"in h){const{content:s,...a}=h;o.push(new M({style:a,parent:t}).addFragment({content:s}))}}return o}const N="OffscreenCanvas"in globalThis;let K;function j(){return K??(K=N?new OffscreenCanvas(1,1):document.createElement("canvas"))}function z(r,t){switch(t.shadowColor&&(r.shadowColor=t.shadowColor),t.shadowOffsetX!==void 0&&(r.shadowOffsetX=t.shadowOffsetX),t.shadowOffsetY!==void 0&&(r.shadowOffsetY=t.shadowOffsetY),t.shadowBlur!==void 0&&(r.shadowBlur=t.shadowBlur),t.textStrokeColor&&(r.strokeStyle=t.textStrokeColor),t.textStrokeWidth!==void 0&&(r.lineWidth=t.textStrokeWidth),t.color&&(r.fillStyle=t.color),t.textAlign&&(r.textAlign=t.textAlign),t.fontKerning&&(r.fontKerning=t.fontKerning),t.verticalAlign){case"baseline":r.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":r.textBaseline=t.verticalAlign;break}t.letterSpacing!==void 0&&(r.letterSpacing=`${t.letterSpacing}px`),(t.fontStyle||t.fontWeight!==void 0||t.fontSize!==void 0||t.fontFamily)&&(r.font=[t.fontStyle||"normal",t.fontWeight||"normal",`${t.fontSize||14}px`,t.fontFamily||"sans-serif"].join(" "))}function F(r,t){const o=j().getContext("2d");return z(o,t),o.measureText(r)}const G=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;function U(r,t,o){const h=[],s=r.slice();let a,l;for(;a=s.shift();){const u=a.fragments.slice();let b=0;const B=[];for(;l=u.shift();){const C=l.getComputedStyle();let S="",k=!1,e=0,i="";for(const m of l.content){if(a.maxCharWidth=Math.max(a.maxCharWidth,F(m,{...C,letterSpacing:0}).width),i+=m,G.test(l.content[++e]))continue;let w,d;switch(C.writingMode){case"vertical-lr":case"vertical-rl":w=o,d=i.length*C.fontSize;break;case"horizontal-tb":default:w=t,d=F(i,{...C,letterSpacing:0}).width;break}d+=i.length*C.letterSpacing;const p=/^[\r\n]$/.test(i);if(p||C.textWrap==="wrap"&&w&&b+d>w){let n=p?S.length+1:S.length;!b&&!n&&(S+=i,n+=i.length),S.length&&B.push(l.clone({content:S})),B.length&&(h.push(a.clone({fragments:B.slice()})),B.length=0);const f=l.content.substring(n);(f.length||u.length)&&s.unshift(a.clone({maxCharWidth:0,fragments:(f.length?[l.clone({content:f})]:[]).concat(u.slice())})),u.length=0,k=!0;break}else b+=d;S+=i,i=""}k||B.push(l.clone())}B.length&&h.push(a.clone({fragments:B}))}return h}function I(r){return{width:0,height:0,color:null,backgroundColor:null,fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textTransform:"none",textDecoration:null,textStrokeWidth:0,textStrokeColor:null,lineHeight:1,letterSpacing:0,shadowColor:null,shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,writingMode:"horizontal-tb",...r}}function $(r){const{content:t}=r,{width:o,height:h,...s}=I(r.style);let a=L(t,s);a=U(a,o,h);let l=a.reduce((e,i)=>e+i.maxCharWidth*i.getComputedStyle().lineHeight,0),u=0,b=0;a.forEach(e=>{const i=[];let m=null,w=u,d=b;e.fragments.forEach((n,f)=>{const x=n.getComputedStyle();switch(x.writingMode){case"vertical-rl":case"vertical-lr":{const g=e.maxCharWidth,y=g*x.lineHeight;f||(d=0,x.writingMode==="vertical-rl"&&(l-=y,w=l));const W=n.content.length,v=W*x.fontSize+(W-1)*x.letterSpacing;n.contentBox.x=w+(y-g)/2,n.contentBox.y=d,n.contentBox.width=g,n.contentBox.height=v,n.inlineBox.x=w,n.inlineBox.y=d,n.inlineBox.width=y,n.inlineBox.height=v,n.glyphBox.x=w+(y-g)/2,n.glyphBox.y=d,n.glyphBox.width=g,n.glyphBox.height=v,n.baseline=0,n.centerX=w+y/2,d+=v+x.letterSpacing;break}case"horizontal-tb":{f||(w=0);const{fontBoundingBoxAscent:g,fontBoundingBoxDescent:y,actualBoundingBoxAscent:W,actualBoundingBoxDescent:v,actualBoundingBoxLeft:A,actualBoundingBoxRight:X,width:E}=F(n.content,{...x,textAlign:"center",verticalAlign:"baseline"}),R=x.fontSize,Y=R*x.lineHeight,D=d+(Y-(g+y))/2+g;n.contentBox.x=w,n.contentBox.y=d+(Y-R)/2,n.contentBox.width=E,n.contentBox.height=R,n.inlineBox.x=w,n.inlineBox.y=d,n.inlineBox.width=E,n.inlineBox.height=Y,n.glyphBox.x=w,n.glyphBox.y=D-W,n.glyphBox.width=A+X,n.glyphBox.height=W+v,n.baseline=D,n.centerX=w+A,i.push(n.contentBox),e.contentBox=c.from(...i),e.contentBox.height<n.contentBox.height&&(m=n),w+=E;break}}}),e.lineBox=c.from(...e.fragments.map(n=>n.inlineBox)),u+=e.lineBox.width,b+=e.lineBox.height;const p=F("x",{...(m??e).getComputedStyle(),textAlign:"left",verticalAlign:"baseline"});e.xHeight=p.actualBoundingBoxAscent,e.baseline=e.lineBox.y+(e.lineBox.height-(p.fontBoundingBoxAscent+p.fontBoundingBoxDescent))/2+p.fontBoundingBoxAscent});const B=c.from(...a.map(e=>e.lineBox),new c({width:o,height:h})),{width:C,height:S}=B;a.forEach(e=>{e.contentBox=c.from(...e.fragments.map(i=>i.contentBox)),e.glyphBox=c.from(...e.fragments.map(i=>i.glyphBox)),e.fragments.forEach(i=>{const m=i.getComputedStyle(),w=i.inlineBox.x,d=i.inlineBox.y;let p=w,n=d;switch(m.writingMode){case"vertical-rl":case"vertical-lr":switch(m.textAlign){case"end":case"right":n+=S-e.contentBox.height;break;case"center":n+=(S-e.contentBox.height)/2;break}break;case"horizontal-tb":{switch(m.textAlign){case"end":case"right":p+=C-e.contentBox.width;break;case"center":p+=(C-e.contentBox.width)/2;break}switch(m.verticalAlign){case"top":n+=e.lineBox.y-i.inlineBox.y;break;case"middle":n=e.baseline-e.xHeight/2-i.inlineBox.height/2;break;case"bottom":n+=e.lineBox.bottom-i.inlineBox.bottom;break;case"sub":n+=e.baseline-i.glyphBox.bottom;break;case"super":n+=e.baseline-i.glyphBox.y;break;case"text-top":n+=e.glyphBox.y-i.inlineBox.y;break;case"text-bottom":n+=e.glyphBox.bottom-i.inlineBox.bottom;break;case"baseline":default:i.inlineBox.height<e.lineBox.height&&(n+=e.baseline-i.baseline);break}break}}const f=p-w,x=n-d;i.inlineBox.move(f,x),i.contentBox.move(f,x),i.glyphBox.move(f,x),i.baseline+=x,i.centerX+=f}),e.contentBox=c.from(...e.fragments.map(i=>i.contentBox)),e.glyphBox=c.from(...e.fragments.map(i=>i.glyphBox))});const k=c.from(...a.map(e=>e.contentBox));return{box:B,contentBox:k,viewBox:c.from(B,k),glyphBox:c.from(...a.map(e=>e.glyphBox)),paragraphs:a}}function P(r,t,o){if(typeof t=="string"&&t.startsWith("linear-gradient")){const{x0:h,y0:s,x1:a,y1:l,stops:u}=V(t,o.left,o.top,o.width,o.height),b=r.createLinearGradient(h,s,a,l);return u.forEach(B=>b.addColorStop(B.offset,B.color)),b}return t}function V(r,t,o,h,s){var e;const a=((e=r.match(/linear-gradient\((.+)\)$/))==null?void 0:e[1])??"",l=a.split(",")[0],u=l.includes("deg")?l:"0deg",b=a.replace(u,"").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi),C=(Number(u.replace("deg",""))||0)*Math.PI/180,S=h*Math.sin(C),k=s*Math.cos(C);return{x0:t+h/2-S,y0:o+s/2+k,x1:t+h/2+S,y1:o+s/2-k,stops:Array.from(b).map(i=>{let m=i[2];return m.startsWith("(")?m=m.split(",").length>3?`rgba${m}`:`rgb${m}`:m=`#${m}`,{offset:Number(i[3].replace("%",""))/100,color:m}})}}function H(r,t,o){o!=null&&o.color&&(o.color=P(r,o.color,t)),o!=null&&o.backgroundColor&&(o.backgroundColor=P(r,o.backgroundColor,t)),o!=null&&o.textStrokeColor&&(o.textStrokeColor=P(r,o.textStrokeColor,t))}function q(r){const{view:t=document.createElement("canvas"),style:o,draws:h=[],pixelRatio:s=1}=r,a=h.length>0?h:[{}],{box:l,viewBox:u,paragraphs:b}=$(r),{x:B,y:C,width:S,height:k}=u,e=t.getContext("2d"),i=-B+S,m=-C+k;t.style.width=`${i}px`,t.style.height=`${m}px`,t.dataset.width=String(l.width),t.dataset.height=String(l.height),t.dataset.pixelRatio=String(s),t.width=Math.max(1,Math.floor(i*s)),t.height=Math.max(1,Math.floor(m*s)),e.scale(s,s),e.clearRect(0,0,t.width,t.height),e.translate(-B,-C);const w={...o};return H(e,new c({width:S,height:k}),w),b.forEach(d=>{H(e,d.contentBox,d.style),d.fragments.forEach(p=>{H(e,p.contentBox,p.style)})}),a.forEach(d=>{const p={...d};H(e,new c({width:S,height:k}),p);const n={...w,...p};n!=null&&n.backgroundColor&&(e.fillStyle=n.backgroundColor,e.fillRect(0,0,t.width,t.height)),b.forEach(f=>{var x;(x=f.style)!=null&&x.backgroundColor&&(e.fillStyle=f.style.backgroundColor,e.fillRect(f.lineBox.x,f.lineBox.y,f.lineBox.width,f.lineBox.height)),f.fragments.forEach(g=>{var y;(y=g.style)!=null&&y.backgroundColor&&(e.fillStyle=g.style.backgroundColor,e.fillRect(g.inlineBox.x,g.inlineBox.y,g.inlineBox.width,g.inlineBox.height))})}),z(e,n),b.forEach(f=>{f.style&&z(e,f.style),f.fragments.forEach(x=>{z(e,{...x.style,textAlign:"left",verticalAlign:"top"});let{x:g,y,width:W,height:v}=x.contentBox;p.offsetX&&(g+=p.offsetX),p.offsetY&&(y+=p.offsetY);const A={...x.getComputedStyle(),...p};switch(A.writingMode){case"vertical-rl":case"vertical-lr":{let X=0;for(const E of x.content)e.fillText(E,g,y+X),A.textStrokeWidth&&e.strokeText(E,g,y+X),X+=A.fontSize+A.letterSpacing;break}case"horizontal-tb":e.fillText(x.content,g,y),A.textStrokeWidth&&e.strokeText(x.content,g,y);break}switch(A.textDecoration){case"underline":e.beginPath(),e.moveTo(g,y+v-2),e.lineTo(g+W,y+v-2),e.stroke();break;case"line-through":e.beginPath(),e.moveTo(g,y+v/2),e.lineTo(g+W,y+v/2),e.stroke();break}})})}),t}T.measureText=$,T.renderText=q,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})});
+(function(W,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(W=typeof globalThis<"u"?globalThis:W||self,c(W.modernText={}))})(this,function(W){"use strict";class c{get left(){return this.x}get top(){return this.y}get right(){return this.x+this.width}get bottom(){return this.y+this.height}constructor({x:t=0,y:o=0,width:h=0,height:s=0}={}){this.x=t,this.y=o,this.width=h,this.height=s}static from(...t){const o=t[0],h=t.slice(1).reduce((s,a)=>(s.x=Math.min(s.x,a.x),s.y=Math.min(s.y,a.y),s.right=Math.max(s.right,a.right),s.bottom=Math.max(s.bottom,a.bottom),s),{x:o.x,y:o.y,right:o.right,bottom:o.bottom});return new c({x:h.x,y:h.y,width:h.right-h.x,height:h.bottom-h.y})}move(t,o){return this.x+=t,this.y+=o,this}clone(){return new c({x:this.x,y:this.y,width:this.width,height:this.height})}}class H{constructor({content:t="",style:o,parent:h,contentBox:s=new c,inlineBox:a=new c,glyphBox:l=new c,centerX:f=0,baseline:w=0}={}){switch(this.content=t,this.style=o,this.parent=h,this.contentBox=s,this.inlineBox=a,this.glyphBox=l,this.centerX=f,this.baseline=w,this.getComputedStyle().textTransform){case"uppercase":this.content=this.content.toUpperCase();break;case"lowercase":this.content=this.content.toLowerCase();break}}getComputedStyle(){var t;return{...(t=this.parent)==null?void 0:t.getComputedStyle(),...this.style}}clone(t){return new H({content:this.content,style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),inlineBox:this.inlineBox.clone(),glyphBox:this.glyphBox.clone(),centerX:this.centerX,baseline:this.baseline,...t})}}class T{constructor({style:t,parent:o,contentBox:h=new c,lineBox:s=new c,glyphBox:a=new c,baseline:l=0,xHeight:f=0,maxCharWidth:w=0,fragments:u=[]}={}){this.style=t,this.parent=o,this.contentBox=h,this.lineBox=s,this.glyphBox=a,this.baseline=l,this.xHeight=f,this.maxCharWidth=w,this.fragments=u}addFragment(t){return this.fragments.push(new H({...t,parent:this})),this}getComputedStyle(){return{...this.parent,...this.style}}clone(t){return new T({style:this.style,parent:this.parent,contentBox:this.contentBox.clone(),lineBox:this.lineBox.clone(),glyphBox:this.glyphBox.clone(),baseline:this.baseline,xHeight:this.xHeight,maxCharWidth:this.maxCharWidth,fragments:this.fragments.map(o=>o.clone()),...t})}}function L(r,t){const o=[];if(typeof r=="string")o.push(new T({parent:t}).addFragment({content:r}));else{r=Array.isArray(r)?r:[r];for(const h of r)if(typeof h=="string")o.push(new T({parent:t}).addFragment({content:h}));else if(Array.isArray(h)){const s=new T({parent:t});h.forEach(a=>{if(typeof a=="string")s.addFragment({content:a});else{const{content:l,...f}=a;s.addFragment({content:l,style:f})}}),o.push(s)}else if("fragments"in h){const{fragments:s,...a}=h,l=new T({style:a,parent:t});s.forEach(f=>{const{content:w,...u}=f;l.addFragment({content:w,style:u})}),o.push(l)}else if("content"in h){const{content:s,...a}=h;o.push(new T({style:a,parent:t}).addFragment({content:s}))}}return o}const N="OffscreenCanvas"in globalThis;let K;function j(){return K??(K=N?new OffscreenCanvas(1,1):document.createElement("canvas"))}function Y(r,t){switch(t.shadowColor&&(r.shadowColor=t.shadowColor),t.shadowOffsetX!==void 0&&(r.shadowOffsetX=t.shadowOffsetX),t.shadowOffsetY!==void 0&&(r.shadowOffsetY=t.shadowOffsetY),t.shadowBlur!==void 0&&(r.shadowBlur=t.shadowBlur),t.textStrokeColor&&(r.strokeStyle=t.textStrokeColor),t.textStrokeWidth!==void 0&&(r.lineWidth=t.textStrokeWidth),t.color&&(r.fillStyle=t.color),t.textAlign&&(r.textAlign=t.textAlign),t.fontKerning&&(r.fontKerning=t.fontKerning),t.verticalAlign){case"baseline":r.textBaseline="alphabetic";break;case"top":case"middle":case"bottom":r.textBaseline=t.verticalAlign;break}t.letterSpacing!==void 0&&(r.letterSpacing=`${t.letterSpacing}px`),(t.fontStyle||t.fontWeight!==void 0||t.fontSize!==void 0||t.fontFamily)&&(r.font=[t.fontStyle||"normal",t.fontWeight||"normal",`${t.fontSize||14}px`,t.fontFamily||"sans-serif"].join(" "))}function z(r,t){const o=j().getContext("2d");return Y(o,t),o.measureText(r)}const G=/[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;function U(r,t,o){const h=[],s=r.slice();let a,l;for(;a=s.shift();){const f=a.fragments.slice();let w=0;const u=[];for(;l=f.shift();){const C=l.getComputedStyle();let S="",v=!1,e=0,i="";for(const B of l.content){if(a.maxCharWidth=Math.max(a.maxCharWidth,z(B,{...C,letterSpacing:0}).width),i+=B,G.test(l.content[++e]))continue;let m,g;switch(C.writingMode){case"vertical-lr":case"vertical-rl":m=o,g=i.length*C.fontSize;break;case"horizontal-tb":default:m=t,g=z(i,{...C,letterSpacing:0}).width;break}g+=i.length*C.letterSpacing;const p=/^[\r\n]$/.test(i);if(p||C.textWrap==="wrap"&&m&&w+g>m){let n=p?S.length+1:S.length;!w&&!n&&(S+=i,n+=i.length),S.length&&u.push(l.clone({content:S})),u.length&&(h.push(a.clone({fragments:u.slice()})),u.length=0);const b=l.content.substring(n);(b.length||f.length)&&s.unshift(a.clone({maxCharWidth:0,fragments:(b.length?[l.clone({content:b})]:[]).concat(f.slice())})),f.length=0,v=!0;break}else w+=g;S+=i,i=""}v||u.push(l.clone())}u.length&&h.push(a.clone({fragments:u}))}return h}function I(r){return{width:0,height:0,color:null,backgroundColor:null,fontSize:14,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal",fontKerning:"normal",textWrap:"wrap",textAlign:"start",verticalAlign:"baseline",textTransform:"none",textDecoration:null,textStrokeWidth:0,textStrokeColor:null,lineHeight:1,letterSpacing:0,shadowColor:null,shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,writingMode:"horizontal-tb",...r}}function $(r){const{content:t}=r,{width:o,height:h,...s}=I(r.style);let a=L(t,s);a=U(a,o,h);let l=a.reduce((e,i)=>e+i.maxCharWidth*i.getComputedStyle().lineHeight,0),f=0,w=0;a.forEach(e=>{const i=[];let B=null,m=f,g=w;e.fragments.forEach((n,b)=>{const x=n.getComputedStyle();switch(x.writingMode){case"vertical-rl":case"vertical-lr":{const d=e.maxCharWidth,y=d*x.lineHeight;b||(g=0,x.writingMode==="vertical-rl"&&(l-=y,m=l));const k=n.content.length,A=k*x.fontSize+(k-1)*x.letterSpacing;n.contentBox.x=m+(y-d)/2,n.contentBox.y=g,n.contentBox.width=d,n.contentBox.height=A,n.inlineBox.x=m,n.inlineBox.y=g,n.inlineBox.width=y,n.inlineBox.height=A,n.glyphBox.x=m+(y-d)/2,n.glyphBox.y=g,n.glyphBox.width=d,n.glyphBox.height=A,n.baseline=0,n.centerX=m+y/2,g+=A+x.letterSpacing;break}case"horizontal-tb":{b||(m=0);const{fontBoundingBoxAscent:d,fontBoundingBoxDescent:y,actualBoundingBoxAscent:k,actualBoundingBoxDescent:A,actualBoundingBoxLeft:M,actualBoundingBoxRight:X,width:E}=z(n.content,{...x,textAlign:"center",verticalAlign:"baseline"}),P=x.fontSize,R=P*x.lineHeight,D=g+(R-(d+y))/2+d;n.contentBox.x=m,n.contentBox.y=g+(R-P)/2,n.contentBox.width=E,n.contentBox.height=P,n.inlineBox.x=m,n.inlineBox.y=g,n.inlineBox.width=E,n.inlineBox.height=R,n.glyphBox.x=m,n.glyphBox.y=D-k,n.glyphBox.width=M+X,n.glyphBox.height=k+A,n.baseline=D,n.centerX=m+M,i.push(n.contentBox),e.contentBox=c.from(...i),e.contentBox.height<n.contentBox.height&&(B=n),m+=E;break}}}),e.lineBox=c.from(...e.fragments.map(n=>n.inlineBox)),f+=e.lineBox.width,w+=e.lineBox.height;const p=z("x",{...(B??e).getComputedStyle(),textAlign:"left",verticalAlign:"baseline"});e.xHeight=p.actualBoundingBoxAscent,e.baseline=e.lineBox.y+(e.lineBox.height-(p.fontBoundingBoxAscent+p.fontBoundingBoxDescent))/2+p.fontBoundingBoxAscent});const u=c.from(...a.map(e=>e.lineBox),new c({width:o,height:h})),{width:C,height:S}=u;a.forEach(e=>{e.contentBox=c.from(...e.fragments.map(i=>i.contentBox)),e.glyphBox=c.from(...e.fragments.map(i=>i.glyphBox)),e.fragments.forEach(i=>{const B=i.getComputedStyle(),m=i.inlineBox.x,g=i.inlineBox.y;let p=m,n=g;switch(B.writingMode){case"vertical-rl":case"vertical-lr":switch(B.textAlign){case"end":case"right":n+=S-e.contentBox.height;break;case"center":n+=(S-e.contentBox.height)/2;break}break;case"horizontal-tb":{switch(B.textAlign){case"end":case"right":p+=C-e.contentBox.width;break;case"center":p+=(C-e.contentBox.width)/2;break}switch(B.verticalAlign){case"top":n+=e.lineBox.y-i.inlineBox.y;break;case"middle":n=e.baseline-e.xHeight/2-i.inlineBox.height/2;break;case"bottom":n+=e.lineBox.bottom-i.inlineBox.bottom;break;case"sub":n+=e.baseline-i.glyphBox.bottom;break;case"super":n+=e.baseline-i.glyphBox.y;break;case"text-top":n+=e.glyphBox.y-i.inlineBox.y;break;case"text-bottom":n+=e.glyphBox.bottom-i.inlineBox.bottom;break;case"baseline":default:i.inlineBox.height<e.lineBox.height&&(n+=e.baseline-i.baseline);break}break}}const b=p-m,x=n-g;i.inlineBox.move(b,x),i.contentBox.move(b,x),i.glyphBox.move(b,x),i.baseline+=x,i.centerX+=b}),e.contentBox=c.from(...e.fragments.map(i=>i.contentBox)),e.glyphBox=c.from(...e.fragments.map(i=>i.glyphBox))});const v=c.from(...a.map(e=>e.contentBox));return{box:u,contentBox:v,viewBox:c.from(u,v),glyphBox:c.from(...a.map(e=>e.glyphBox)),paragraphs:a}}function O(r,t,o){if(typeof t=="string"&&t.startsWith("linear-gradient")){const{x0:h,y0:s,x1:a,y1:l,stops:f}=V(t,o.left,o.top,o.width,o.height),w=r.createLinearGradient(h,s,a,l);return f.forEach(u=>w.addColorStop(u.offset,u.color)),w}return t}function V(r,t,o,h,s){var e;const a=((e=r.match(/linear-gradient\((.+)\)$/))==null?void 0:e[1])??"",l=a.split(",")[0],f=l.includes("deg")?l:"0deg",w=a.replace(f,"").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi),C=(Number(f.replace("deg",""))||0)*Math.PI/180,S=h*Math.sin(C),v=s*Math.cos(C);return{x0:t+h/2-S,y0:o+s/2+v,x1:t+h/2+S,y1:o+s/2-v,stops:Array.from(w).map(i=>{let B=i[2];return B.startsWith("(")?B=B.split(",").length>3?`rgba${B}`:`rgb${B}`:B=`#${B}`,{offset:Number(i[3].replace("%",""))/100,color:B}})}}function F(r,t,o){o!=null&&o.color&&(o.color=O(r,o.color,t)),o!=null&&o.backgroundColor&&(o.backgroundColor=O(r,o.backgroundColor,t)),o!=null&&o.textStrokeColor&&(o.textStrokeColor=O(r,o.textStrokeColor,t))}function q(r){const{view:t=document.createElement("canvas"),style:o,draws:h=[],pixelRatio:s=1}=r,a=h.length>0?h:[{}],{box:l,viewBox:f,paragraphs:w}=$(r),{x:u,y:C,width:S,height:v}=f,e=t.getContext("2d"),i=-u+S,B=-C+v;t.style.width=`${i}px`,t.style.height=`${B}px`,t.dataset.width=String(l.width),t.dataset.height=String(l.height),t.dataset.pixelRatio=String(s),t.width=Math.max(1,Math.floor(i*s)),t.height=Math.max(1,Math.floor(B*s)),e.scale(s,s),e.clearRect(0,0,t.width,t.height),e.translate(-u,-C);const m={...o};return F(e,new c({width:S,height:v}),m),w.forEach(g=>{F(e,g.contentBox,g.style),g.fragments.forEach(p=>{F(e,p.contentBox,p.style)})}),a.forEach(g=>{const p={...g};F(e,new c({width:S,height:v}),p);const n={...m,...p};n!=null&&n.backgroundColor&&(e.fillStyle=n.backgroundColor,e.fillRect(0,0,t.width,t.height)),w.forEach(b=>{var x;(x=b.style)!=null&&x.backgroundColor&&(e.fillStyle=b.style.backgroundColor,e.fillRect(b.lineBox.x,b.lineBox.y,b.lineBox.width,b.lineBox.height)),b.fragments.forEach(d=>{var y;(y=d.style)!=null&&y.backgroundColor&&(e.fillStyle=d.style.backgroundColor,e.fillRect(d.inlineBox.x,d.inlineBox.y,d.inlineBox.width,d.inlineBox.height))})}),w.forEach(b=>{b.fragments.forEach(x=>{const d={...x.getComputedStyle(),...p};Y(e,{...d,textAlign:"left",verticalAlign:"top"});let{x:y,y:k,width:A,height:M}=x.contentBox;switch(p.offsetX&&(y+=p.offsetX),p.offsetY&&(k+=p.offsetY),d.writingMode){case"vertical-rl":case"vertical-lr":{let X=0;for(const E of x.content)e.fillText(E,y,k+X),d.textStrokeWidth&&e.strokeText(E,y,k+X),X+=d.fontSize+d.letterSpacing;break}case"horizontal-tb":e.fillText(x.content,y,k),d.textStrokeWidth&&e.strokeText(x.content,y,k);break}switch(d.textDecoration){case"underline":e.beginPath(),e.moveTo(y,k+M-2),e.lineTo(y+A,k+M-2),e.stroke();break;case"line-through":e.beginPath(),e.moveTo(y,k+M/2),e.lineTo(y+A,k+M/2),e.stroke();break}})})}),t}W.measureText=$,W.renderText=q,Object.defineProperty(W,Symbol.toStringTag,{value:"Module"})});

package/dist/index.mjs

@@ -1,4 +1,4 @@
-class p {
+class w {
   get left() {
     return this.x;
   }
@@ -11,23 +11,23 @@ class p {
   get bottom() {
     return this.y + this.height;
   }
-  constructor({ x: t = 0, y: o = 0, width: h = 0, height: s = 0 } = {}) {
-    this.x = t, this.y = o, this.width = h, this.height = s;
+  constructor({ x: t = 0, y: o = 0, width: s = 0, height: h = 0 } = {}) {
+    this.x = t, this.y = o, this.width = s, this.height = h;
   }
   static from(...t) {
-    const o = t[0], h = t.slice(1).reduce((s, a) => (s.x = Math.min(s.x, a.x), s.y = Math.min(s.y, a.y), s.right = Math.max(s.right, a.right), s.bottom = Math.max(s.bottom, a.bottom), s), { x: o.x, y: o.y, right: o.right, bottom: o.bottom });
-    return new p({
-      x: h.x,
-      y: h.y,
-      width: h.right - h.x,
-      height: h.bottom - h.y
+    const o = t[0], s = t.slice(1).reduce((h, a) => (h.x = Math.min(h.x, a.x), h.y = Math.min(h.y, a.y), h.right = Math.max(h.right, a.right), h.bottom = Math.max(h.bottom, a.bottom), h), { x: o.x, y: o.y, right: o.right, bottom: o.bottom });
+    return new w({
+      x: s.x,
+      y: s.y,
+      width: s.right - s.x,
+      height: s.bottom - s.y
     });
   }
   move(t, o) {
     return this.x += t, this.y += o, this;
   }
   clone() {
-    return new p({
+    return new w({
       x: this.x,
       y: this.y,
       width: this.width,
@@ -35,18 +35,18 @@ class p {
     });
   }
 }
-class Y {
+class R {
   constructor({
     content: t = "",
     style: o,
-    parent: h,
-    contentBox: s = new p(),
-    inlineBox: a = new p(),
-    glyphBox: l = new p(),
-    centerX: f = 0,
-    baseline: b = 0
+    parent: s,
+    contentBox: h = new w(),
+    inlineBox: a = new w(),
+    glyphBox: l = new w(),
+    centerX: d = 0,
+    baseline: p = 0
   } = {}) {
-    switch (this.content = t, this.style = o, this.parent = h, this.contentBox = s, this.inlineBox = a, this.glyphBox = l, this.centerX = f, this.baseline = b, this.getComputedStyle().textTransform) {
+    switch (this.content = t, this.style = o, this.parent = s, this.contentBox = h, this.inlineBox = a, this.glyphBox = l, this.centerX = d, this.baseline = p, this.getComputedStyle().textTransform) {
       case "uppercase":
         this.content = this.content.toUpperCase();
         break;
@@ -63,7 +63,7 @@ class Y {
     };
   }
   clone(t) {
-    return new Y({
+    return new R({
       content: this.content,
       style: this.style,
       parent: this.parent,
@@ -80,18 +80,18 @@ class E {
   constructor({
     style: t,
     parent: o,
-    contentBox: h = new p(),
-    lineBox: s = new p(),
-    glyphBox: a = new p(),
+    contentBox: s = new w(),
+    lineBox: h = new w(),
+    glyphBox: a = new w(),
     baseline: l = 0,
-    xHeight: f = 0,
-    maxCharWidth: b = 0,
-    fragments: u = []
+    xHeight: d = 0,
+    maxCharWidth: p = 0,
+    fragments: f = []
   } = {}) {
-    this.style = t, this.parent = o, this.contentBox = h, this.lineBox = s, this.glyphBox = a, this.baseline = l, this.xHeight = f, this.maxCharWidth = b, this.fragments = u;
+    this.style = t, this.parent = o, this.contentBox = s, this.lineBox = h, this.glyphBox = a, this.baseline = l, this.xHeight = d, this.maxCharWidth = p, this.fragments = f;
   }
   addFragment(t) {
-    return this.fragments.push(new Y({ ...t, parent: this })), this;
+    return this.fragments.push(new R({ ...t, parent: this })), this;
   }
   getComputedStyle() {
     return {
@@ -120,28 +120,28 @@ function D(r, t) {
     o.push(new E({ parent: t }).addFragment({ content: r }));
   else {
     r = Array.isArray(r) ? r : [r];
-    for (const h of r)
-      if (typeof h == "string")
-        o.push(new E({ parent: t }).addFragment({ content: h }));
-      else if (Array.isArray(h)) {
-        const s = new E({ parent: t });
-        h.forEach((a) => {
+    for (const s of r)
+      if (typeof s == "string")
+        o.push(new E({ parent: t }).addFragment({ content: s }));
+      else if (Array.isArray(s)) {
+        const h = new E({ parent: t });
+        s.forEach((a) => {
           if (typeof a == "string")
-            s.addFragment({ content: a });
+            h.addFragment({ content: a });
           else {
-            const { content: l, ...f } = a;
-            s.addFragment({ content: l, style: f });
+            const { content: l, ...d } = a;
+            h.addFragment({ content: l, style: d });
           }
-        }), o.push(s);
-      } else if ("fragments" in h) {
-        const { fragments: s, ...a } = h, l = new E({ style: a, parent: t });
-        s.forEach((f) => {
-          const { content: b, ...u } = f;
-          l.addFragment({ content: b, style: u });
+        }), o.push(h);
+      } else if ("fragments" in s) {
+        const { fragments: h, ...a } = s, l = new E({ style: a, parent: t });
+        h.forEach((d) => {
+          const { content: p, ...f } = d;
+          l.addFragment({ content: p, style: f });
         }), o.push(l);
-      } else if ("content" in h) {
-        const { content: s, ...a } = h;
-        o.push(new E({ style: a, parent: t }).addFragment({ content: s }));
+      } else if ("content" in s) {
+        const { content: h, ...a } = s;
+        o.push(new E({ style: a, parent: t }).addFragment({ content: h }));
       }
   }
   return o;
@@ -151,7 +151,7 @@ let L;
 function N() {
   return L ?? (L = P ? new OffscreenCanvas(1, 1) : document.createElement("canvas"));
 }
-function z(r, t) {
+function $(r, t) {
   switch (t.shadowColor && (r.shadowColor = t.shadowColor), t.shadowOffsetX !== void 0 && (r.shadowOffsetX = t.shadowOffsetX), t.shadowOffsetY !== void 0 && (r.shadowOffsetY = t.shadowOffsetY), t.shadowBlur !== void 0 && (r.shadowBlur = t.shadowBlur), t.textStrokeColor && (r.strokeStyle = t.textStrokeColor), t.textStrokeWidth !== void 0 && (r.lineWidth = t.textStrokeWidth), t.color && (r.fillStyle = t.color), t.textAlign && (r.textAlign = t.textAlign), t.fontKerning && (r.fontKerning = t.fontKerning), t.verticalAlign) {
     case "baseline":
       r.textBaseline = "alphabetic";
@@ -169,64 +169,64 @@ function z(r, t) {
     t.fontFamily || "sans-serif"
   ].join(" "));
 }
-function F(r, t) {
+function z(r, t) {
   const o = N().getContext("2d");
-  return z(o, t), o.measureText(r);
+  return $(o, t), o.measureText(r);
 }
 const K = /[\s\n\t\u200B\u200C\u200D\u200E\u200F.,?!:;"'(){}\[\]<>\/\\|~#\$%\*\+=&^，。？！：；“”‘’（）【】《》……——]/;
 function G(r, t, o) {
-  const h = [], s = r.slice();
+  const s = [], h = r.slice();
   let a, l;
-  for (; a = s.shift(); ) {
-    const f = a.fragments.slice();
-    let b = 0;
-    const u = [];
-    for (; l = f.shift(); ) {
+  for (; a = h.shift(); ) {
+    const d = a.fragments.slice();
+    let p = 0;
+    const f = [];
+    for (; l = d.shift(); ) {
       const C = l.getComputedStyle();
-      let S = "", k = !1, e = 0, i = "";
-      for (const B of l.content) {
+      let S = "", v = !1, e = 0, i = "";
+      for (const u of l.content) {
         if (a.maxCharWidth = Math.max(
           a.maxCharWidth,
-          F(B, { ...C, letterSpacing: 0 }).width
-        ), i += B, K.test(l.content[++e]))
+          z(u, { ...C, letterSpacing: 0 }).width
+        ), i += u, K.test(l.content[++e]))
           continue;
-        let m, x;
+        let B, c;
         switch (C.writingMode) {
           case "vertical-lr":
           case "vertical-rl":
-            m = o, x = i.length * C.fontSize;
+            B = o, c = i.length * C.fontSize;
             break;
           case "horizontal-tb":
           default:
-            m = t, x = F(i, { ...C, letterSpacing: 0 }).width;
+            B = t, c = z(i, { ...C, letterSpacing: 0 }).width;
             break;
         }
-        x += i.length * C.letterSpacing;
-        const w = /^[\r\n]$/.test(i);
-        if (w || C.textWrap === "wrap" && m && b + x > m) {
-          let n = w ? S.length + 1 : S.length;
-          !b && !n && (S += i, n += i.length), S.length && u.push(l.clone({ content: S })), u.length && (h.push(
+        c += i.length * C.letterSpacing;
+        const m = /^[\r\n]$/.test(i);
+        if (m || C.textWrap === "wrap" && B && p + c > B) {
+          let n = m ? S.length + 1 : S.length;
+          !p && !n && (S += i, n += i.length), S.length && f.push(l.clone({ content: S })), f.length && (s.push(
             a.clone({
-              fragments: u.slice()
+              fragments: f.slice()
             })
-          ), u.length = 0);
-          const d = l.content.substring(n);
-          (d.length || f.length) && s.unshift(
+          ), f.length = 0);
+          const b = l.content.substring(n);
+          (b.length || d.length) && h.unshift(
             a.clone({
               maxCharWidth: 0,
-              fragments: (d.length ? [l.clone({ content: d })] : []).concat(f.slice())
+              fragments: (b.length ? [l.clone({ content: b })] : []).concat(d.slice())
             })
-          ), f.length = 0, k = !0;
+          ), d.length = 0, v = !0;
           break;
         } else
-          b += x;
+          p += c;
         S += i, i = "";
       }
-      k || u.push(l.clone());
+      v || f.push(l.clone());
     }
-    u.length && h.push(a.clone({ fragments: u }));
+    f.length && s.push(a.clone({ fragments: f }));
   }
-  return h;
+  return s;
 }
 function U(r) {
   return {
@@ -257,63 +257,63 @@ function U(r) {
   };
 }
 function j(r) {
-  const { content: t } = r, { width: o, height: h, ...s } = U(r.style);
-  let a = D(t, s);
-  a = G(a, o, h);
-  let l = a.reduce((e, i) => e + i.maxCharWidth * i.getComputedStyle().lineHeight, 0), f = 0, b = 0;
+  const { content: t } = r, { width: o, height: s, ...h } = U(r.style);
+  let a = D(t, h);
+  a = G(a, o, s);
+  let l = a.reduce((e, i) => e + i.maxCharWidth * i.getComputedStyle().lineHeight, 0), d = 0, p = 0;
   a.forEach((e) => {
     const i = [];
-    let B = null, m = f, x = b;
-    e.fragments.forEach((n, d) => {
+    let u = null, B = d, c = p;
+    e.fragments.forEach((n, b) => {
       const g = n.getComputedStyle();
       switch (g.writingMode) {
         case "vertical-rl":
         case "vertical-lr": {
-          const c = e.maxCharWidth, y = c * g.lineHeight;
-          d || (x = 0, g.writingMode === "vertical-rl" && (l -= y, m = l));
-          const W = n.content.length, v = W * g.fontSize + (W - 1) * g.letterSpacing;
-          n.contentBox.x = m + (y - c) / 2, n.contentBox.y = x, n.contentBox.width = c, n.contentBox.height = v, n.inlineBox.x = m, n.inlineBox.y = x, n.inlineBox.width = y, n.inlineBox.height = v, n.glyphBox.x = m + (y - c) / 2, n.glyphBox.y = x, n.glyphBox.width = c, n.glyphBox.height = v, n.baseline = 0, n.centerX = m + y / 2, x += v + g.letterSpacing;
+          const x = e.maxCharWidth, y = x * g.lineHeight;
+          b || (c = 0, g.writingMode === "vertical-rl" && (l -= y, B = l));
+          const k = n.content.length, A = k * g.fontSize + (k - 1) * g.letterSpacing;
+          n.contentBox.x = B + (y - x) / 2, n.contentBox.y = c, n.contentBox.width = x, n.contentBox.height = A, n.inlineBox.x = B, n.inlineBox.y = c, n.inlineBox.width = y, n.inlineBox.height = A, n.glyphBox.x = B + (y - x) / 2, n.glyphBox.y = c, n.glyphBox.width = x, n.glyphBox.height = A, n.baseline = 0, n.centerX = B + y / 2, c += A + g.letterSpacing;
           break;
         }
         case "horizontal-tb": {
-          d || (m = 0);
+          b || (B = 0);
           const {
-            fontBoundingBoxAscent: c,
+            fontBoundingBoxAscent: x,
             fontBoundingBoxDescent: y,
-            actualBoundingBoxAscent: W,
-            actualBoundingBoxDescent: v,
-            actualBoundingBoxLeft: A,
+            actualBoundingBoxAscent: k,
+            actualBoundingBoxDescent: A,
+            actualBoundingBoxLeft: W,
             actualBoundingBoxRight: T,
             width: M
-          } = F(n.content, {
+          } = z(n.content, {
             ...g,
             textAlign: "center",
             verticalAlign: "baseline"
-          }), H = g.fontSize, O = H * g.lineHeight, $ = x + (O - (c + y)) / 2 + c;
-          n.contentBox.x = m, n.contentBox.y = x + (O - H) / 2, n.contentBox.width = M, n.contentBox.height = H, n.inlineBox.x = m, n.inlineBox.y = x, n.inlineBox.width = M, n.inlineBox.height = O, n.glyphBox.x = m, n.glyphBox.y = $ - W, n.glyphBox.width = A + T, n.glyphBox.height = W + v, n.baseline = $, n.centerX = m + A, i.push(n.contentBox), e.contentBox = p.from(...i), e.contentBox.height < n.contentBox.height && (B = n), m += M;
+          }), F = g.fontSize, H = F * g.lineHeight, Y = c + (H - (x + y)) / 2 + x;
+          n.contentBox.x = B, n.contentBox.y = c + (H - F) / 2, n.contentBox.width = M, n.contentBox.height = F, n.inlineBox.x = B, n.inlineBox.y = c, n.inlineBox.width = M, n.inlineBox.height = H, n.glyphBox.x = B, n.glyphBox.y = Y - k, n.glyphBox.width = W + T, n.glyphBox.height = k + A, n.baseline = Y, n.centerX = B + W, i.push(n.contentBox), e.contentBox = w.from(...i), e.contentBox.height < n.contentBox.height && (u = n), B += M;
           break;
         }
       }
-    }), e.lineBox = p.from(...e.fragments.map((n) => n.inlineBox)), f += e.lineBox.width, b += e.lineBox.height;
-    const w = F("x", {
-      ...(B ?? e).getComputedStyle(),
+    }), e.lineBox = w.from(...e.fragments.map((n) => n.inlineBox)), d += e.lineBox.width, p += e.lineBox.height;
+    const m = z("x", {
+      ...(u ?? e).getComputedStyle(),
       textAlign: "left",
       verticalAlign: "baseline"
     });
-    e.xHeight = w.actualBoundingBoxAscent, e.baseline = e.lineBox.y + (e.lineBox.height - (w.fontBoundingBoxAscent + w.fontBoundingBoxDescent)) / 2 + w.fontBoundingBoxAscent;
+    e.xHeight = m.actualBoundingBoxAscent, e.baseline = e.lineBox.y + (e.lineBox.height - (m.fontBoundingBoxAscent + m.fontBoundingBoxDescent)) / 2 + m.fontBoundingBoxAscent;
   });
-  const u = p.from(
+  const f = w.from(
     ...a.map((e) => e.lineBox),
-    new p({ width: o, height: h })
-  ), { width: C, height: S } = u;
+    new w({ width: o, height: s })
+  ), { width: C, height: S } = f;
   a.forEach((e) => {
-    e.contentBox = p.from(...e.fragments.map((i) => i.contentBox)), e.glyphBox = p.from(...e.fragments.map((i) => i.glyphBox)), e.fragments.forEach((i) => {
-      const B = i.getComputedStyle(), m = i.inlineBox.x, x = i.inlineBox.y;
-      let w = m, n = x;
-      switch (B.writingMode) {
+    e.contentBox = w.from(...e.fragments.map((i) => i.contentBox)), e.glyphBox = w.from(...e.fragments.map((i) => i.glyphBox)), e.fragments.forEach((i) => {
+      const u = i.getComputedStyle(), B = i.inlineBox.x, c = i.inlineBox.y;
+      let m = B, n = c;
+      switch (u.writingMode) {
         case "vertical-rl":
         case "vertical-lr":
-          switch (B.textAlign) {
+          switch (u.textAlign) {
             case "end":
             case "right":
               n += S - e.contentBox.height;
@@ -324,16 +324,16 @@ function j(r) {
           }
           break;
         case "horizontal-tb": {
-          switch (B.textAlign) {
+          switch (u.textAlign) {
             case "end":
             case "right":
-              w += C - e.contentBox.width;
+              m += C - e.contentBox.width;
               break;
             case "center":
-              w += (C - e.contentBox.width) / 2;
+              m += (C - e.contentBox.width) / 2;
               break;
           }
-          switch (B.verticalAlign) {
+          switch (u.verticalAlign) {
             case "top":
               n += e.lineBox.y - i.inlineBox.y;
               break;
@@ -363,97 +363,96 @@ function j(r) {
           break;
         }
       }
-      const d = w - m, g = n - x;
-      i.inlineBox.move(d, g), i.contentBox.move(d, g), i.glyphBox.move(d, g), i.baseline += g, i.centerX += d;
-    }), e.contentBox = p.from(...e.fragments.map((i) => i.contentBox)), e.glyphBox = p.from(...e.fragments.map((i) => i.glyphBox));
+      const b = m - B, g = n - c;
+      i.inlineBox.move(b, g), i.contentBox.move(b, g), i.glyphBox.move(b, g), i.baseline += g, i.centerX += b;
+    }), e.contentBox = w.from(...e.fragments.map((i) => i.contentBox)), e.glyphBox = w.from(...e.fragments.map((i) => i.glyphBox));
   });
-  const k = p.from(...a.map((e) => e.contentBox));
+  const v = w.from(...a.map((e) => e.contentBox));
   return {
-    box: u,
-    contentBox: k,
-    viewBox: p.from(u, k),
-    glyphBox: p.from(...a.map((e) => e.glyphBox)),
+    box: f,
+    contentBox: v,
+    viewBox: w.from(f, v),
+    glyphBox: w.from(...a.map((e) => e.glyphBox)),
     paragraphs: a
   };
 }
-function R(r, t, o) {
+function O(r, t, o) {
   if (typeof t == "string" && t.startsWith("linear-gradient")) {
-    const { x0: h, y0: s, x1: a, y1: l, stops: f } = I(t, o.left, o.top, o.width, o.height), b = r.createLinearGradient(h, s, a, l);
-    return f.forEach((u) => b.addColorStop(u.offset, u.color)), b;
+    const { x0: s, y0: h, x1: a, y1: l, stops: d } = I(t, o.left, o.top, o.width, o.height), p = r.createLinearGradient(s, h, a, l);
+    return d.forEach((f) => p.addColorStop(f.offset, f.color)), p;
   }
   return t;
 }
-function I(r, t, o, h, s) {
+function I(r, t, o, s, h) {
   var e;
-  const a = ((e = r.match(/linear-gradient\((.+)\)$/)) == null ? void 0 : e[1]) ?? "", l = a.split(",")[0], f = l.includes("deg") ? l : "0deg", b = a.replace(f, "").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi), C = (Number(f.replace("deg", "")) || 0) * Math.PI / 180, S = h * Math.sin(C), k = s * Math.cos(C);
+  const a = ((e = r.match(/linear-gradient\((.+)\)$/)) == null ? void 0 : e[1]) ?? "", l = a.split(",")[0], d = l.includes("deg") ? l : "0deg", p = a.replace(d, "").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+?%)/gi), C = (Number(d.replace("deg", "")) || 0) * Math.PI / 180, S = s * Math.sin(C), v = h * Math.cos(C);
   return {
-    x0: t + h / 2 - S,
-    y0: o + s / 2 + k,
-    x1: t + h / 2 + S,
-    y1: o + s / 2 - k,
-    stops: Array.from(b).map((i) => {
-      let B = i[2];
-      return B.startsWith("(") ? B = B.split(",").length > 3 ? `rgba${B}` : `rgb${B}` : B = `#${B}`, {
+    x0: t + s / 2 - S,
+    y0: o + h / 2 + v,
+    x1: t + s / 2 + S,
+    y1: o + h / 2 - v,
+    stops: Array.from(p).map((i) => {
+      let u = i[2];
+      return u.startsWith("(") ? u = u.split(",").length > 3 ? `rgba${u}` : `rgb${u}` : u = `#${u}`, {
         offset: Number(i[3].replace("%", "")) / 100,
-        color: B
+        color: u
       };
     })
   };
 }
 function X(r, t, o) {
-  o != null && o.color && (o.color = R(r, o.color, t)), o != null && o.backgroundColor && (o.backgroundColor = R(r, o.backgroundColor, t)), o != null && o.textStrokeColor && (o.textStrokeColor = R(r, o.textStrokeColor, t));
+  o != null && o.color && (o.color = O(r, o.color, t)), o != null && o.backgroundColor && (o.backgroundColor = O(r, o.backgroundColor, t)), o != null && o.textStrokeColor && (o.textStrokeColor = O(r, o.textStrokeColor, t));
 }
 function V(r) {
   const {
     view: t = document.createElement("canvas"),
     style: o,
-    draws: h = [],
-    pixelRatio: s = 1
-  } = r, a = h.length > 0 ? h : [{}], { box: l, viewBox: f, paragraphs: b } = j(r), { x: u, y: C, width: S, height: k } = f, e = t.getContext("2d"), i = -u + S, B = -C + k;
-  t.style.width = `${i}px`, t.style.height = `${B}px`, t.dataset.width = String(l.width), t.dataset.height = String(l.height), t.dataset.pixelRatio = String(s), t.width = Math.max(1, Math.floor(i * s)), t.height = Math.max(1, Math.floor(B * s)), e.scale(s, s), e.clearRect(0, 0, t.width, t.height), e.translate(-u, -C);
-  const m = { ...o };
-  return X(e, new p({ width: S, height: k }), m), b.forEach((x) => {
-    X(e, x.contentBox, x.style), x.fragments.forEach((w) => {
-      X(e, w.contentBox, w.style);
+    draws: s = [],
+    pixelRatio: h = 1
+  } = r, a = s.length > 0 ? s : [{}], { box: l, viewBox: d, paragraphs: p } = j(r), { x: f, y: C, width: S, height: v } = d, e = t.getContext("2d"), i = -f + S, u = -C + v;
+  t.style.width = `${i}px`, t.style.height = `${u}px`, t.dataset.width = String(l.width), t.dataset.height = String(l.height), t.dataset.pixelRatio = String(h), t.width = Math.max(1, Math.floor(i * h)), t.height = Math.max(1, Math.floor(u * h)), e.scale(h, h), e.clearRect(0, 0, t.width, t.height), e.translate(-f, -C);
+  const B = { ...o };
+  return X(e, new w({ width: S, height: v }), B), p.forEach((c) => {
+    X(e, c.contentBox, c.style), c.fragments.forEach((m) => {
+      X(e, m.contentBox, m.style);
     });
-  }), a.forEach((x) => {
-    const w = { ...x };
-    X(e, new p({ width: S, height: k }), w);
-    const n = { ...m, ...w };
-    n != null && n.backgroundColor && (e.fillStyle = n.backgroundColor, e.fillRect(0, 0, t.width, t.height)), b.forEach((d) => {
+  }), a.forEach((c) => {
+    const m = { ...c };
+    X(e, new w({ width: S, height: v }), m);
+    const n = { ...B, ...m };
+    n != null && n.backgroundColor && (e.fillStyle = n.backgroundColor, e.fillRect(0, 0, t.width, t.height)), p.forEach((b) => {
       var g;
-      (g = d.style) != null && g.backgroundColor && (e.fillStyle = d.style.backgroundColor, e.fillRect(d.lineBox.x, d.lineBox.y, d.lineBox.width, d.lineBox.height)), d.fragments.forEach((c) => {
+      (g = b.style) != null && g.backgroundColor && (e.fillStyle = b.style.backgroundColor, e.fillRect(b.lineBox.x, b.lineBox.y, b.lineBox.width, b.lineBox.height)), b.fragments.forEach((x) => {
         var y;
-        (y = c.style) != null && y.backgroundColor && (e.fillStyle = c.style.backgroundColor, e.fillRect(c.inlineBox.x, c.inlineBox.y, c.inlineBox.width, c.inlineBox.height));
+        (y = x.style) != null && y.backgroundColor && (e.fillStyle = x.style.backgroundColor, e.fillRect(x.inlineBox.x, x.inlineBox.y, x.inlineBox.width, x.inlineBox.height));
       });
-    }), z(e, n), b.forEach((d) => {
-      d.style && z(e, d.style), d.fragments.forEach((g) => {
-        z(e, {
-          ...g.style,
+    }), p.forEach((b) => {
+      b.fragments.forEach((g) => {
+        const x = { ...g.getComputedStyle(), ...m };
+        $(e, {
+          ...x,
           textAlign: "left",
           verticalAlign: "top"
         });
-        let { x: c, y, width: W, height: v } = g.contentBox;
-        w.offsetX && (c += w.offsetX), w.offsetY && (y += w.offsetY);
-        const A = { ...g.getComputedStyle(), ...w };
-        switch (A.writingMode) {
+        let { x: y, y: k, width: A, height: W } = g.contentBox;
+        switch (m.offsetX && (y += m.offsetX), m.offsetY && (k += m.offsetY), x.writingMode) {
           case "vertical-rl":
           case "vertical-lr": {
             let T = 0;
             for (const M of g.content)
-              e.fillText(M, c, y + T), A.textStrokeWidth && e.strokeText(M, c, y + T), T += A.fontSize + A.letterSpacing;
+              e.fillText(M, y, k + T), x.textStrokeWidth && e.strokeText(M, y, k + T), T += x.fontSize + x.letterSpacing;
             break;
           }
           case "horizontal-tb":
-            e.fillText(g.content, c, y), A.textStrokeWidth && e.strokeText(g.content, c, y);
+            e.fillText(g.content, y, k), x.textStrokeWidth && e.strokeText(g.content, y, k);
             break;
         }
-        switch (A.textDecoration) {
+        switch (x.textDecoration) {
           case "underline":
-            e.beginPath(), e.moveTo(c, y + v - 2), e.lineTo(c + W, y + v - 2), e.stroke();
+            e.beginPath(), e.moveTo(y, k + W - 2), e.lineTo(y + A, k + W - 2), e.stroke();
             break;
           case "line-through":
-            e.beginPath(), e.moveTo(c, y + v / 2), e.lineTo(c + W, y + v / 2), e.stroke();
+            e.beginPath(), e.moveTo(y, k + W / 2), e.lineTo(y + A, k + W / 2), e.stroke();
             break;
         }
       });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "packageManager": "pnpm@8.14.1",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",