modern-text 0.1.2 → 0.1.3

package/dist/index.cjs

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

package/dist/index.js

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

package/dist/index.mjs

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

package/package.json

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

package/types/render-text.d.ts

@@ -1,5 +1,6 @@
 import type { MeasureTextOptions } from './measure-text';
 export interface RenderTextOptions extends MeasureTextOptions {
+    view?: HTMLCanvasElement;
     pixelRatio?: number;
 }
 export declare function renderText(options: RenderTextOptions): HTMLCanvasElement;