修正排版

web/admin/print/TabletDesign.aspx

@@ -610,7 +610,7 @@ html, body, * {
                         text: "",
                     },
                     tab: "型版",
-                    value:"",
+                    value: "",
                     elements: [],
                     activeId: null,
                     styleID: null,
@@ -641,7 +641,7 @@ html, body, * {
                     newPaper: {
                         paperName: "",
                         paperWidth: "",
-                        paperHeight:""
+                        paperHeight: ""
                     },
                     styleName: "",
                     showStyleMenu: false,
@@ -655,7 +655,7 @@ html, body, * {
                     removePaperID: "",
                     paperMenuX: 0,
                     paperMenuY: 0,
-                    paperDialog:false,
+                    paperDialog: false,
                 }
             },
             computed: {
@@ -667,7 +667,7 @@ html, body, * {
             watch: {
                 zoomScale: {
                     handler() {
-                        this.scaleSize =Math.floor( Number(this.zoomScale)*100)
+                        this.scaleSize = Math.floor(Number(this.zoomScale) * 100)
                         $(".tablet-paper").css({ transform: `scale(${this.zoomScale})` });
                     },
                     deep: true,
@@ -675,7 +675,7 @@ html, body, * {
             },
             methods: {
                 minusZoomScalee() {
-                    this.zoomScale = Number(this.zoomScale) -0.05
+                    this.zoomScale = Number(this.zoomScale) - 0.05
                     //this.scaleSize = this.scaleSize - 5
                     //$(".tablet-paper").css({ transform:`scale(${this.zoomScale})` });
                 },
@@ -706,7 +706,7 @@ html, body, * {
                             return id === "origin" ? "原尺寸" : "合併";
                         }
                     }
-                  return ""
+                    return ""
                 },
                 init() {
                     //$(".tablet-element").draggable({});
@@ -738,7 +738,7 @@ html, body, * {
                     this.paperMenuX = e.clientX
                     this.paperMenuY = e.clientY
                     this.showPaperMenu = true
-                    this.removePaperID=id
+                    this.removePaperID = id
                 },
                 closePaperMenu() {
                     this.showPaperMenu = false;
@@ -912,8 +912,8 @@ html, body, * {
                     let size = this.allSize.find(x => x.name == paperSize)
                     this.paper.width = this.orientation == "portrait" ? size.width : size.height;
                     this.paper.height = this.orientation == "portrait" ? size.height : size.width;
-                   
+
-                   
+
                     $(".tablet-paper").css({
                         "background-color": "white",
                         width: this.paper.width + "mm",
@@ -949,7 +949,7 @@ html, body, * {
                 },
                 async getElements() {
                     let self = this
-                    self.tabletElements.length=0
+                    self.tabletElements.length = 0
                     await axios
                         .post(HTTP_HOST + 'api/tablet/GetTabletElement', {})
                         .then(response => {
@@ -968,7 +968,7 @@ html, body, * {
                 async getStyles() {
                     let self = this
                     self.allStyle.length = 0
-                   // $(".style-menu").html("")
+                    // $(".style-menu").html("")
                     await axios
                         .post(HTTP_HOST + 'api/tablet/GetStyleData', {})
                         .then(response => {
@@ -1035,7 +1035,7 @@ html, body, * {
                     this.printMode = s.printMode
                     this.perpage = s.perpage
                     this.styleID = id
-                    this.styleName=s.name
+                    this.styleName = s.name
 
                     //this.rosterLimit = s.rosterLimit
                     //$("#paperSize").val(s.paperSize);
@@ -1103,12 +1103,12 @@ html, body, * {
                         });
                 },
                 changeBg(item) {
-                    this.backendInp=item.name
+                    this.backendInp = item.name
                     let path = this.bg.find(el => el.name == item.name)//$("#backendInp").val()
                     $(".tablet-paper").css({ 'background-image': 'url(' + path.path + ')', 'background-size': '100% 100%' })
                 },
                 changePrintSize(id) {
-                    this.printSize=id
+                    this.printSize = id
                 },
                 changePosition() {
                     //this.activeId = id;
@@ -1157,7 +1157,7 @@ html, body, * {
                         return false
                     }
                     let ps = { paperSize: paperSize }
-                    self.removeDialog=false
+                    self.removeDialog = false
                     await axios
                         .post(HTTP_HOST + 'api/tablet/DelPaperSize', ps)
                         .then(response => {
@@ -1173,7 +1173,7 @@ html, body, * {
                                 }
                             } else {
                                 this.snackbar.text = "存檔失敗";
-                                this.snackbar.show=true
+                                this.snackbar.show = true
                             }
                             this.removeDialog = false;
                         });
@@ -1201,7 +1201,7 @@ html, body, * {
                                 $("#toast_body").html(`${response.data.message}`)
                                 self.toast.show();
                                 if (response.data.result == "Y") {
-                                   
+
                                     self.getStyles()
                                 }
                             }
@@ -1233,12 +1233,12 @@ html, body, * {
                                     self.toast.show();
                                     self.getPaperSize()
                                     //$("#paperSize").val("")
-                                    self.paperSize = self.allSize.length>0?self.allSize[0].id:""
+                                    self.paperSize = self.allSize.length > 0 ? self.allSize[0].id : ""
                                     self.changePaper()
                                     self.paperDialog = false
                                     self.newPaper.paperName = ""
                                     self.newPaper.paperWidth = 0
-                                    self.newPaper.paperHeight =0
+                                    self.newPaper.paperHeight = 0
                                 }
                             }
                         });
@@ -1314,7 +1314,7 @@ html, body, * {
                     this.elements.forEach(el => {
                         const names = el.text.split('\n').filter(s => s.trim());
                         const pages = Math.max(1, Math.ceil(names.length / self.rosterLimit));
-                        const slice = names.slice(0 * self.rosterLimit, (0 + 1) * self.rosterLimit);
+                        const slice = names;//.slice(0 * self.rosterLimit, (0 + 1) * self.rosterLimit);
                         $paper.append(self.createEl(el, slice));
                     });
                     //$canvas.append($paper);
@@ -1390,13 +1390,13 @@ html, body, * {
                     else {
                         let normal = []
                         normal.push(el.text);
-                        html = this.renderNormalWithSpace(normal,el)
+                        html = this.renderNormalWithSpace(normal, el)
                         //html = el.text;
                     }
                     //el.style.fontSize
                     return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
                         .css({
-                            position: "absolute", left: el.x + "mm", top: el.y + "mm",  fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
+                            position: "absolute", left: el.x + "mm", top: el.y + "mm", fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
                             //position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
                         })
                         .html(html);
@@ -1418,7 +1418,7 @@ html, body, * {
                         //"row-gap": "1px",
                         "align-items": "flex-start",
                         "justify-content": "start",
-                        "font-size":`${d.style?d.style.fontSize:d.fontSize}pt`
+                        "font-size": `${d.style ? d.style.fontSize : d.fontSize}pt`
                     });
                     //console.log("吼優:",mid);
                     mid.forEach(x => {
@@ -1451,17 +1451,17 @@ html, body, * {
                         if (charsPerCol < 1) charsPerCol = 1;
 
                         let cols = Math.ceil(l / charsPerCol);
-                        let neededWidth = (cols===1)?s_px:cols * (s_px * 1.1); // 1.1 為緊密行高
+                        let neededWidth = (cols === 1) ? s_px : cols * (s_px * 1.1); // 1.1 為緊密行高
 
                         // 如果折疊後的總寬度不超過分配到的橫向欄寬，就是最佳字體
-                        if (neededWidth <= maxW&&(cols>1||l*s_px<=maxH)) {
+                        if (neededWidth <= maxW && (cols > 1 || l * s_px <= maxH)) {
                             return s;
                         }
                         s -= 1; // 否則繼續縮小 1pt
                     }
                     return 12; // 極限最小字體
                 },
-                renderNameList(names, el, rowWidth) {
+                /*renderNameList(names, el, rowWidth) {
                     let h = Number(el.height);
                     let w = Number(el.width);
                     let th = Number(el.textHeight) || h;
@@ -1592,6 +1592,220 @@ html, body, * {
                     //    $namelist.append(self.renderNameSpan(n, el, rowWidth))
                     //})
                     //return $namelist;
+                },*/
+                renderNameList(names, el) {
+                    let h = Number(el.height);
+                    let w = Number(el.width);
+                    let th = Number(el.textHeight) || h;
+                    let v_gap = Number(el.textSpan) || 0;
+                    let h_gap = 5;
+                    let shrinkLimit = 6;
+
+                    if (h < 500) {
+                        shrinkLimit = 8;
+                    } else if (h < 300) {
+                        shrinkLimit = 12;
+                    }
+
+                    let long_s = Number(el.style.fontSize);
+                    let short_s = Number(el.style.fontSize);
+
+                    if (h < 500 && names.length == 1 && names[0].includes("暨無始劫以來累世冤親債主")) {
+                        names = names[0].split("暨");
+                        names[0] = names[0] + "暨";
+                    }
+
+                    // 1. 初始判定與特例條件計算
+                    let items = names.map(name => {
+                        let l = name.length;
+                        let isShort = (l * 40) <= (th + (v_gap / 2));
+                        return { name: name, l: l, isShort: isShort, isMulti: false, size: 0 };
+                    });
+
+                    let maxShortLen = Math.max(...items.filter(x => x.isShort).map(x => x.l), 1);
+                    let allShort = items.every(x => x.isShort);
+                    let fitsInHalf = items.every(x => (x.l * short_s * 1.333) <= (h / 2));
+
+                    let isSpecial1 = allShort && fitsInHalf && items.length === 1;
+                    let isSpecial2 = allShort && fitsInHalf && items.length === 2;
+                    let isSpecial4 = allShort && fitsInHalf && (items.length === 4 || items.length === 6 || items.length === 8);
+                    let isSpecial = isSpecial1 || isSpecial2 || isSpecial4;
+
+                    let sizes = [];
+                    let shrink_turn = 'long';
+
+                    // 2. 模擬排版與字體縮放運算
+                    while (true) {
+                        let totalWidth = 0;
+                        let current_col_h = 0;
+                        let current_col_w = 0;
+                        let cols_width = [];
+                        let any_wrapped = false;
+
+                        for (let i = 0; i < items.length; i++) {
+                            let item = items[i];
+                            let s = item.isShort ? short_s : long_s;
+                            item.size = s;
+                            let size_px = s * 1.333;
+
+                            if (item.isShort) {
+                                let item_h = Math.max(th, maxShortLen * size_px);
+                                if (isSpecial) {
+                                    if (isSpecial1 || isSpecial2) item_h = h / 2;
+                                    if (isSpecial4) item_h = (h / 2) - (v_gap / 2);
+                                } else {
+                                    let natural_h = maxShortLen * size_px;
+                                    if (item_h > natural_h * 1.5) item_h = natural_h * 1.5;
+                                }
+
+                                if (current_col_h === 0) {
+                                    current_col_h = item_h;
+                                    current_col_w = size_px;
+                                } else if ((current_col_h + v_gap + item_h) <= h) {
+                                    current_col_h += (v_gap + item_h);
+                                    if (size_px > current_col_w) current_col_w = size_px;
+                                } else {
+                                    cols_width.push(current_col_w);
+                                    current_col_h = item_h;
+                                    current_col_w = size_px;
+                                }
+                            } else {
+                                if (current_col_h > 0) {
+                                    cols_width.push(current_col_w);
+                                    current_col_h = 0;
+                                    current_col_w = 0;
+                                }
+                                let item_w = size_px;
+                                if ((item.l * size_px) > (h - 10)) {
+                                    item.isMulti = true;
+                                    any_wrapped = true;
+                                    let chars_per_col = Math.floor((h - 10) / size_px);
+                                    if (chars_per_col < 1) chars_per_col = 1;
+                                    let item_cols = Math.ceil(item.l / chars_per_col);
+                                    item_w = item_cols * (size_px * 1.1);
+                                } else {
+                                    item.isMulti = false;
+                                }
+                                cols_width.push(item_w);
+                            }
+                        }
+
+                        if (current_col_h > 0) cols_width.push(current_col_w);
+                        totalWidth = cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0);
+
+                        if (totalWidth <= w && (!any_wrapped || long_s === shrinkLimit)) {
+                            sizes = items.map(x => {
+                                let final_s = x.size;
+                                if (x.isShort) {
+                                    let max_s_for_th = Math.floor(th / (maxShortLen * 1.333));
+                                    if (final_s > max_s_for_th) final_s = max_s_for_th;
+                                }
+                                return { name: x.name, size: final_s, isMulti: x.isMulti, isShort: x.isShort };
+                            });
+                            break;
+                        }
+
+                        let hasLong = items.some(x => !x.isShort);
+                        let hasShort = items.some(x => x.isShort);
+                        if (hasLong && hasShort) {
+                            if (shrink_turn === 'long') {
+                                if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; }
+                                else if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; }
+                                else break;
+                            } else {
+                                if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; }
+                                else if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; }
+                                else break;
+                            }
+                        } else if (hasLong) {
+                            if (long_s > shrinkLimit) long_s--;
+                            else break;
+                        } else {
+                            if (short_s > shrinkLimit) short_s--;
+                            else break;
+                        }
+                    }
+
+                    if (sizes.length === 0) {
+                        sizes = names.map(name => ({ name: name, size: shrinkLimit, isMulti: false, isShort: true }));
+                    }
+
+                    let flexDir = isSpecial2 ? "column" : "row";
+                    let flexJustify = isSpecial ? "center" : "flex-start";
+                    let flexAlign = "center";
+                    if (isSpecial4) v_gap = Number(h) / 4;
+
+                    let $namelist = $(`<div class='nameList'></div>`).css({
+                        "writing-mode": "vertical-rl",
+                        display: "flex",
+                        "flex-direction": flexDir,
+                        "flex-wrap": "wrap",
+                        "align-content": "center",
+                        "align-items": flexAlign,
+                        "justify-content": flexJustify,
+                        margin: "auto",
+                        width: `${w}px`,
+                        height: `${h}px`,
+                        border: "0px solid transparent",
+                        padding: "1px",
+                        "column-gap": `${v_gap}px`,
+                        "font-family": el.style.fontFamily
+                    });
+
+                    sizes.forEach(item => {
+                        let size_px = item.size * 1.333;
+                        let natural_max_h = maxShortLen * size_px;
+                        let boxH_num = item.isShort ? Math.max(th, natural_max_h) : h;
+
+                        if (isSpecial) {
+                            if (isSpecial1 || isSpecial2) boxH_num = h / 2;
+                            if (isSpecial4) boxH_num = (h / 2) - v_gap - 2;
+                        } else if (item.isShort) {
+                            if (boxH_num > natural_max_h * 1.5) boxH_num = natural_max_h * 1.5;
+                        }
+
+                        let minH = `${boxH_num}px`;
+                        let alignStyle = item.isMulti || (!item.isMulti && !item.isShort) ? "start" : "justify";
+                        let spanDisplay = "block";
+                        let spanJustifyContent = "flex-start";
+                        let spanMarginTop = "0px";
+
+                        if (isSpecial1 || isSpecial2) spanMarginTop = `-${h / 4}px`;
+                        if (isSpecial1 || isSpecial2 || isSpecial4) {
+                            alignStyle = "justify";
+                            spanJustifyContent = "space-between";
+                        }
+
+                        let nameLen = item.name.length;
+                        let contentH = nameLen * size_px;
+                        let emptySpace = boxH_num - contentH;
+                        let gapsCount = nameLen > 1 ? (nameLen - 1) : 1;
+                        let avgGap = emptySpace / gapsCount;
+
+                        if (!isSpecial && alignStyle === "justify" && avgGap > (size_px * 1.5)) {
+                            alignStyle = "justify";
+                            spanDisplay = "block";
+                            spanJustifyContent = "start";
+                        }
+
+                        let $span = $(`<span style="font-size: ${item.size}pt;">${item.name}</span>`).css({
+                            "display": spanDisplay,
+                            "justify-content": spanJustifyContent,
+                            "align-items": "center",
+                            "min-height": minH,
+                            "max-height": `${h}px`,
+                            "width": "auto",
+                            "line-height": "1.1",
+                            "text-align": alignStyle,
+                            "text-align-last": alignStyle,
+                            "margin-left": "5px",
+                            "margin-top": spanMarginTop,
+                            "text-justify": "inter-character",
+                            "word-break": "break-all"
+                        });
+                        $namelist.append($span);
+                    });
+                    return $namelist;
                 },
                 renderNameSpan(item, el, colWidth) {
                     let th = Number(el.textHeight) || Number(el.height)
@@ -1617,7 +1831,7 @@ html, body, * {
                     //// 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
                     //let s_px = indSize * 1.333;
                     //let isMultiLine = (name.length * s_px) > Number(el.textHeight);
-                
+
                     //// 3. 根據是否折行動態決定對齊方式
                     //// 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
                     //let alignStyle = isMultiLine ? "start" : "justify";
@@ -1646,135 +1860,260 @@ html, body, * {
                     //    "text-justify": "inter-character",
                     //});//     "margin-bottom": `${el.textSpan}px`,
                 },
+                /*  renderLiveList(names, el) {
+                      //console.log("renderLiveList:", names);
+                      //$("#imp-text").updateActive("text",names)
+                      //let $namelist = $(`<div class='liveList'></div>`).css({
+                      //    "writing-mode": "vertical rl",
+                      //    display: "flex",
+                      //    "flex-direction": "row",
+                      //    "flex-wrap": "wrap",
+                      //    margin: "auto",
+                      //    width: `${el.width}px`,
+                      //    height: `${el.height}px`,
+                      //    border: "0px solid #ccc",
+                      //    padding: "1px",
+                      //    "font-family": "BiauKai",
+                      //    //"letter-spacing": `${el.textSpan}px`,
+                      //    "column-gap": `${el.textSpan}px`,
+                      //    "align-items": "center",
+                      //});
+                      //// "column-gap": `${el.textSpan}px`,
+                      ////"row-gap": "1px",
+                      //let self = this;
+                      //names.forEach(n => {
+                      //    $namelist.append(self.renderLiveSpan(n, el, rowWidth))
+                      //})
+                      let h = Number(el.height);
+                      let w = Number(el.width);
+                      let th = Number(el.textHeight) || h;
+  
+                      // 1. 單純計算總共有幾行 (列)
+                      let namesPerCol = Math.floor(h / th);
+                      if (namesPerCol < 1) namesPerCol = 1;
+  
+                      let cols = Math.ceil(names.length / namesPerCol); // 總行數
+  
+                      // 2. 根據行數，縮小字體直到總寬度放得下
+                      let s = Number(el.style.fontSize);
+                      while (s >= 4) {
+                          let s_px = s * (4 / 3); // pt 轉 px
+                          let lh = 1.1;           // 行高
+                          let gap = 0;            // 對應 span 的 margin-left
+  
+                          // 總寬度 = 總行數 * (單行像素寬度 + 間距)
+                          let totalWidth = cols * (s_px * lh + gap);
+  
+                          // 放得下就停止縮小
+                          if (totalWidth <= w) {
+                              break;
+                          }
+                          s -= 1;
+                      }
+  
+                      if (s < 4) s = 4;
+  
+                      // 3. 建立外層 Flexbox 容器
+                      let $namelist = $(`<div class='liveList'></div>`).css({
+                          "writing-mode": "vertical-rl",
+                          display: "flex",
+                          "flex-direction": "row",
+                          "flex-wrap": "wrap",
+                          "align-content": "center",
+                          "align-items": "center",
+                          margin: "auto",
+                          width: `${w}px`,
+                          height: `${h}px`,
+                          border: "0px solid #ccc",
+                          padding: "0px",
+                          "font-family": el.fontFamily,
+                          "column-gap": `${el.textSpan}px`,
+                      });
+  
+                      let self = this;
+                      names.forEach(name => {
+                          $namelist.append(self.renderLiveSpan(name, el, s));
+                      });
+                      return $namelist;
+                  },
+                  renderLiveSpan(name, el, fontSize) {
+                      let th = Number(el.textHeight) || Number(el.height);
+  
+                      return $(`<span style="font-size: ${fontSize}pt;">${name}</span>`).css({
+                          display: "block",
+                          "min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版
+                          "max-height": `${el.height}px`,
+                          width: "auto",//`${fontSize * 1.33}`,
+                          //"line-height": "1.1",
+                          "text-align": "justify", // 統一分散對齊
+                          "text-align-last": "justify",
+                          //"margin-left": "5px",
+                          "text-justify": "inter-character",
+                          "word-break": "break-all",
+                          "white-space": "pre-line"
+                      });
+                      //// 為「這個名字」獨立計算出專屬的最完美字體大小
+                      //let indSize = this.calcIndividualFontSize(name, el, colWidth);
+                      //// 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
+                      //let s_px = indSize * 1.333;
+                      //let isMultiLine = (name.length * s_px) > Number(el.textHeight);
+  
+                      //// 3. 根據是否折行動態決定對齊方式
+                      //// 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
+                      //let alignStyle = isMultiLine ? "start" : "justify";
+  
+                      //return $(`<span style="font-size: ${indSize}pt;">${name}</span>`).css({
+                      //    display: "block",
+                      //    "min-height": `${el.textHeight}px`,
+                      //    "max-height": `${el.height}px`,
+                      //    width: "auto",
+                      //    "line-height": "1.1",
+                      //    "text-align": alignStyle,             // ★ 動態套用對齊方式
+                      //    "text-align-last": alignStyle,        // ★ 動態套用最後一行對齊方式
+                      //    "margin-left": "5px",
+                      //    "text-justify": "inter-character",
+                      //    "word-break": "break-all"
+                      //});
+                      //console.log("renderLiveSpan:", name, el                    );
+                      //return $(`<span>${name}</span>`).css({
+                      //    display: "block",
+                      //    "min-height": `${el.textHeight}px`,
+                      //    "max-height": `${el.height}px`,
+                      //    width: `${rowWidth}px`,
+                      //    "text-align": "justify",
+                      //    "text-align-last": "justify",
+  
+                      //    "margin-left": "5px",
+                      //    "text-justify": "inter-character",
+                      //});//"margin-bottom": `${el.textSpan}px`,
+                  },*/
                 renderLiveList(names, el) {
-                    //console.log("renderLiveList:", names);
+                    let h = parseFloat(el.height);
-                    //$("#imp-text").updateActive("text",names)
+                    let w = parseFloat(el.width);
-                    //let $namelist = $(`<div class='liveList'></div>`).css({
+                    let th = parseFloat(el.textHeight) || h;
-                    //    "writing-mode": "vertical rl",
+                    let v_gap = parseFloat(el.textSpan) || 0;
-                    //    display: "flex",
+                    let h_gap = 5;
-                    //    "flex-direction": "row",
+                    let shrinkLimit = 4;
-                    //    "flex-wrap": "wrap",
+                    if (Number(el.height) < 300) shrinkLimit = 8;
-                    //    margin: "auto",
+                    else if (Number(el.height) < 500) shrinkLimit = 6;
-                    //    width: `${el.width}px`,
-                    //    height: `${el.height}px`,
-                    //    border: "0px solid #ccc",
-                    //    padding: "1px",
-                    //    "font-family": "BiauKai",
-                    //    //"letter-spacing": `${el.textSpan}px`,
-                    //    "column-gap": `${el.textSpan}px`,
-                    //    "align-items": "center",
-                    //});
-                    //// "column-gap": `${el.textSpan}px`,
-                    ////"row-gap": "1px",
-                    //let self = this;
-                    //names.forEach(n => {
-                    //    $namelist.append(self.renderLiveSpan(n, el, rowWidth))
-                    //})
-                    let h = Number(el.height);
-                    let w = Number(el.width);
-                    let th = Number(el.textHeight) || h;
 
-                    // 1. 單純計算總共有幾行 (列)
+                    let s = parseFloat(el.style.fontSize);
-                    let namesPerCol = Math.floor(h / th);
+                    if (names.length == 2) h = th + v_gap;
-                    if (namesPerCol < 1) namesPerCol = 1;
 
-                    let cols = Math.ceil(names.length / namesPerCol); // 總行數
+                    let maxLen = Math.max(...names.map(x => x.length), 1);
 
-                    // 2. 根據行數，縮小字體直到總寬度放得下
+                    while (s >= shrinkLimit) {
-                    let s = Number(el.style.fontSize);
+                        let size_px = s * 1.333;
-                    while (s >= 4) {
+                        let current_col_h = 0;
-                        let s_px = s * (4 / 3); // pt 轉 px
+                        let current_col_w = 0;
-                        let lh = 1.1;           // 行高
+                        let cols_width = [];
-                        let gap = 0;            // 對應 span 的 margin-left
+                        let any_wrapped = false;
 
-                        // 總寬度 = 總行數 * (單行像素寬度 + 間距)
+                        for (let i = 0; i < names.length; i++) {
-                        let totalWidth = cols * (s_px * lh + gap);
+                            let l = names[i].length;
+                            let natural_max_h = maxLen * size_px;
+                            let item_h = Math.max(th, natural_max_h);
+                            if (item_h > natural_max_h * 1.5) item_h = natural_max_h * 1.5;
 
-                        // 放得下就停止縮小
+                            if (item_h > (h - 5)) {
-                        if (totalWidth <= w) {
+                                any_wrapped = true;
-                            break;
+                                if (current_col_h > 0) {
+                                    cols_width.push(current_col_w);
+                                    current_col_h = 0;
+                                    current_col_w = 0;
+                                }
+                                let chars_per_col = Math.floor((h - 5) / size_px);
+                                if (chars_per_col < 1) chars_per_col = 1;
+                                let item_cols = Math.ceil(l / chars_per_col);
+                                cols_width.push(item_cols * (size_px * 1.1));
+                            } else {
+                                if (current_col_h === 0) {
+                                    current_col_h = item_h;
+                                    current_col_w = size_px;
+                                } else if (current_col_h + v_gap + item_h <= h) {
+                                    current_col_h += v_gap + item_h;
+                                    if (size_px > current_col_w) current_col_w = size_px;
+                                } else {
+                                    cols_width.push(current_col_w);
+                                    current_col_h = item_h;
+                                    current_col_w = size_px;
+                                }
+                            }
                         }
+                        if (current_col_h > 0) cols_width.push(current_col_w);
+                        let totalWidth = cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0);
+                        if (totalWidth <= w && (!any_wrapped || s === shrinkLimit)) break;
                         s -= 1;
                     }
 
-                    if (s < 4) s = 4;
+                    if (s < shrinkLimit) s = shrinkLimit;
 
-                    // 3. 建立外層 Flexbox 容器
                     let $namelist = $(`<div class='liveList'></div>`).css({
                         "writing-mode": "vertical-rl",
-                        display: "flex",
+                        "display": "flex",
-                        "flex-direction": "row",
+                        "flex-flow": "wrap",
-                        "flex-wrap": "wrap",
                         "align-content": "center",
                         "align-items": "center",
-                        margin: "auto",
+                        "margin": "auto",
-                        width: `${w}px`,
+                        "width": `${w}px`,
-                        height: `${h}px`,
+                        "height": `${h}px`,
-                        border: "0px solid #ccc",
+                        "border": "0px solid transparent",
-                        padding: "0px",
+                        "padding": "0px",
-                        "font-family": el.fontFamily,
+                        "font-family": el.style.fontFamily,
-                        "column-gap": `${el.textSpan}px`,
+                        "column-gap": `${v_gap}px`
                     });
 
                     let self = this;
                     names.forEach(name => {
-                        $namelist.append(self.renderLiveSpan(name, el, s));
+                        $namelist.append(self.renderLiveSpan(name, el, s, maxLen));
                     });
                     return $namelist;
                 },
-                renderLiveSpan(name, el, fontSize) {
+                renderLiveSpan(name, el, fontSize, maxLen = 1) {
-                    let th = Number(el.textHeight) || Number(el.height);
+                    let h = parseFloat(el.height);
+                    let th = parseFloat(el.textHeight) || h;
+                    let size_px = fontSize * 1.333;
+                    let l = name.length;
+
+                    let natural_max_h = maxLen * size_px;
+                    let boxH_num = Math.max(th, natural_max_h);
+                    if (boxH_num > natural_max_h * 1.5) boxH_num = natural_max_h * 1.5;
+
+                    let minH = `${boxH_num}px`;
+                    let alignStyle = "justify";
+                    let spanDisplay = "block";
+                    let spanJustifyContent = "flex-start";
+
+                    let contentH = l * size_px;
+                    let emptySpace = boxH_num - contentH;
+                    let gapsCount = l > 1 ? (l - 1) : 1;
+                    let avgGap = emptySpace / gapsCount;
+
+                    if (alignStyle === "justify" && avgGap > (size_px * 1.5)) {
+                        alignStyle = "justify";
+                        spanDisplay = "block";
+                        spanJustifyContent = "space-between";
+                    }
 
                     return $(`<span style="font-size: ${fontSize}pt;">${name}</span>`).css({
-                        display: "block",
+                        "display": spanDisplay,
-                        "min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版
+                        "justify-content": spanJustifyContent,
-                        "max-height": `${el.height}px`,
+                        "align-items": "center",
-                        width: "auto",//`${fontSize * 1.33}`,
+                        "min-height": minH,
-                        //"line-height": "1.1",
+                        "max-height": `${h}px`,
-                        "text-align": "justify", // 統一分散對齊
+                        "width": "auto",
-                        "text-align-last": "justify",
+                        "text-align": alignStyle,
-                        //"margin-left": "5px",
+                        "text-align-last": alignStyle,
+                        "margin-left": "0px",
+                        "margin-top": "0px",
                         "text-justify": "inter-character",
                         "word-break": "break-all",
                         "white-space": "pre-line"
                     });
-                    //// 為「這個名字」獨立計算出專屬的最完美字體大小
-                    //let indSize = this.calcIndividualFontSize(name, el, colWidth);
-                    //// 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
-                    //let s_px = indSize * 1.333;
-                    //let isMultiLine = (name.length * s_px) > Number(el.textHeight);
-
-                    //// 3. 根據是否折行動態決定對齊方式
-                    //// 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
-                    //let alignStyle = isMultiLine ? "start" : "justify";
-
-                    //return $(`<span style="font-size: ${indSize}pt;">${name}</span>`).css({
-                    //    display: "block",
-                    //    "min-height": `${el.textHeight}px`,
-                    //    "max-height": `${el.height}px`,
-                    //    width: "auto",
-                    //    "line-height": "1.1",
-                    //    "text-align": alignStyle,             // ★ 動態套用對齊方式
-                    //    "text-align-last": alignStyle,        // ★ 動態套用最後一行對齊方式
-                    //    "margin-left": "5px",
-                    //    "text-justify": "inter-character",
-                    //    "word-break": "break-all"
-                    //});
-                    //console.log("renderLiveSpan:", name, el                    );
-                    //return $(`<span>${name}</span>`).css({
-                    //    display: "block",
-                    //    "min-height": `${el.textHeight}px`,
-                    //    "max-height": `${el.height}px`,
-                    //    width: `${rowWidth}px`,
-                    //    "text-align": "justify",
-                    //    "text-align-last": "justify",
-
-                    //    "margin-left": "5px",
-                    //    "text-justify": "inter-character",
-                    //});//"margin-bottom": `${el.textSpan}px`,
                 },
+
                 // 品字佈局邏輯：一上二下
-                renderRoster(names, el,rowWidth) {
+                renderRoster(names, el, rowWidth) {
                     if (!names.length) return '';
                     const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
                     const top = names.slice(0, mid);
@@ -1898,9 +2237,9 @@ html, body, * {
 
                         }).html(html);
                     } else if (this.activeId === "title1") {
-                      
+
                         let names = el.text.split('\n').filter(s => s.trim());
-                        let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
+                        let slice = names;//.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
 
                         //let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
                         //let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
@@ -1933,7 +2272,7 @@ html, body, * {
                         }).html(html);
                     } else if (this.activeId === "alive") {
                         let names = el.text.split('\n').filter(s => s.trim());
-                        let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
+                        let slice = names;//.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
                         //let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
                         //let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
                         //let rowWidth = Math.floor(Number(el.width) / rows);
@@ -1961,7 +2300,7 @@ html, body, * {
                     } else if (this.activeId === "righttitle") {
                         let normal = [];
                         normal.push(el.text)
-                        html = this.renderNormalWithSpace(normal,el)
+                        html = this.renderNormalWithSpace(normal, el)
                         $(`.tablet-element[id="${this.activeId}"]`).css({
                             position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
                             fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
@@ -2100,7 +2439,7 @@ html, body, * {
                     let master = {
                         styleID: this.styleID, styleName: this.styleName, paperSize: this.paperSize,//$("#paperSize").val(),
                         backendImg: this.backendInp, printSize: this.printSize, printMode: this.printMode,
-                        orientation:"", printPageCount:this.perPage, rosterLimit: 8,
+                        orientation: "", printPageCount: this.perPage, rosterLimit: 8,
                         detail: detail
                     }
                     //console.log(master);

web/admin/print/print_multi_new.aspx

@@ -373,17 +373,20 @@
                                 mid = mid[0].split("暨");
                                 mid[0] = mid[0] + "暨";
                             }
-
+                            const init_fontSize = Number(d.fontSize) > 40 ? 40 : Number(d.fontSize);
+                            //const init_size_px = init_fontSize * 1.333;
                             // 1. 初始判定與特例條件計算
                             let items = mid.map(name => {
                                 let l = name.length;
-                                let isShort = (l * 40) <= (th + (v_gap / 2));
+                                //應該用初始最大值而不是40
+                                let isShort = (l * init_fontSize) <= (th + (v_gap / 2));
                                 return { name: name, l: l, isShort: isShort, isMulti: false, size: 0 };
                             });
 
                             let maxShortLen = Math.max(...items.filter(x => x.isShort).map(x => x.l), 1);
 
                             let allShort = items.every(x => x.isShort);
+                            console.log("全短名:",items,allShort);
 
                             // 🚀 動態防呆：不寫死字數！用「實際字體大小」計算是否放得進半高。
                             // 這樣 13 個字會自動出局，而 3 個字的小牌位絕對能穩穩過關。
@@ -417,7 +420,7 @@
                                         // 壓縮高度釋放空間 (支援反向放大字體)
                                         if (isSpecial) {
                                             if (isSpecial1 || isSpecial2) item_h = h / 2;
-                                            if (isSpecial4) item_h = (h / 2) - (v_gap / 2);
+                                            if (isSpecial4) item_h = (h / 2) - (v_gap )-2;
                                         } else {
                                             let natural_h = maxShortLen * size_px;
                                             if (item_h > natural_h * 1.5) {
@@ -469,7 +472,18 @@
                                     sizes = items.map(x => {
                                         let final_s = x.size;
                                         if (x.isShort) {
-                                            let max_s_for_th = Math.floor(th / (maxShortLen * 1.333));
+                                            //let max_s_for_th = Math.floor(th / (maxShortLen * 1.333));
+                                            //if (final_s > max_s_for_th) {
+                                            //    final_s = max_s_for_th;
+                                            //}
+                                            // 🚀 關鍵修正：依照是否為特例，賦予實際可用的高度上限，解除原先 th 造成的字體壓抑
+                                            let available_h = th;
+                                            if (isSpecial) {
+                                                if (isSpecial1 || isSpecial2) available_h = h / 2;
+                                                if (isSpecial4) available_h = (h / 2) - v_gap - 2;
+                                            }
+                                            let max_s_for_th = Math.floor(available_h / (maxShortLen * 1.333));
+
                                             if (final_s > max_s_for_th) {
                                                 final_s = max_s_for_th;
                                             }
@@ -511,9 +525,9 @@
                             let flexDir = isSpecial2 ? "column" : "row";
                             let flexJustify = isSpecial ? "center" : "flex-start";
                             let flexAlign = "center";
-                            if (isSpecial4) {
+                            //if (isSpecial4) {
-                                v_gap=Number(h)/4
+                            //    v_gap=Number(h)/4
-                            }
+                            //}
 
                             let $namelist = $(`<div class='nameList'></div>`).css({
                                 "writing-mode": "vertical-rl",