排版

web/admin/print/print_multi_new.aspx

@@ -23,7 +23,7 @@
             }*/
             html, body, form, .full-home, #printArea, .canvas-area {
                 height: auto !important;
-                width: 210mm !important;
+                width: auto !important;
                 overflow: visible !important;  /*必須為 visible */
                 margin: 0 !important;
                 padding: 0 !important;
@@ -107,7 +107,7 @@
             { name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
         ],
         async init() {
-            console.log("init");
+     
             let HTTP_HOST = "<%=UrlHost()%>";
             this.http_host = HTTP_HOST;
             await Promise.all([
@@ -197,13 +197,25 @@
         render() {
             let self = this;
             let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
+            let nowPageWidth = 0;
+            let tabletpaper;
             this.printData.forEach(x => {
-                let style = this.allStyle.find(y => y.styleID == x.style);
+                let style = self.allStyle.find(y => y.styleID == x.style);
-                console.log("style:", style);
-                let size = this.allSize.find(y => y.paperID == style.paperSize);
               
+                let size = self.allSize.find(y => y.paperID == style.paperSize);
 
-                let tabletpaper = $(` <div class="tablet-paper">
+                if ((nowPageWidth + parseFloat(size.width)) > 297) {
+                    $(canvas).css("width", "297" + "mm");
+                    $(canvas).css("height", "210" + "mm");
+                    $(canvas).css("break-after", "page");
+                    $(canvas).css("page-break-after", "always");
+                    $(canvas).append(tabletpaper);
+                    $("#printArea").append(canvas);
+                    canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
+                    nowPageWidth = 0;
+                }
+                nowPageWidth = nowPageWidth + parseFloat(size.width);
+                tabletpaper = $(` <div class="tablet-paper">
                 </div>`)
                 let img = self.bg.find(y => y.name == style.backendImg);
                 tabletpaper.css({
@@ -221,17 +233,20 @@
 
                 let mid_items = tablet.mid_items;
                 let left_items = tablet.left_items;
-                console.log("mid_items:", mid_items)
+          
                 let details = this.allStyleDetails.filter(y => y.styleID == x.style);
                 let mid = [];
                 mid_items.forEach(y => {
                     mid.push(y.fam_name);
                 });
+
+                console.log("details:", details);
                 details.forEach(d => {
                     if (d.isActive != "hidden") {
-                        console.log(d);
+                        //console.log(d);
+                        let { newFontSize, newTxtWidth } = self.scaleFontSize(mid, style, d)
                         let html = "";
-                        if (d.elementID = 'title1') {
+                        if (d.elementID === 'title1') {
                             let $namelist = $(`<div class='nameList'></div>`).css({
                                 "writing-mode": "vertical rl",
                                 display: "flex",
@@ -242,24 +257,29 @@
                                 height: `${d.height}px`,
                                 border: "0px solid #ccc",
                                 padding: "1px",
-                                "font-family": "Kaiti",
+                                "font-family": "DFKai-sb",
                                 "letter-spacing": "0.1em",
                                 "column-gap": "1px",
                                 "row-gap": "1px",
                                 "align-items": "center",
+                                "justify-content":"center"
                             });
+                            
                             mid.forEach(z => {
+                                
                                 let $span = $(`<span>${z}</span>`).css({
                                     display: "block",
                                     "min-height": `${d.textHeight}px`,
                                     "max-height": `${d.height}px`,
-                                    width: `${d.textWidth}px`,
+                                    //width: newTxtWidth +"px", //`${d.textWidth}px`,
                                     "text-align": "justify",
                                     "text-align-last": "justify",
                                     "margin-bottom": "20px",
                                     "margin-left": "5px",
                                     "text-justify": "inter-character",
+                                    //"font-size": newFontSize + "px",
                                     "z-index": 10000,
+                                    "word-break": "break-all"
                                 });
                                 $namelist.append($span);
                             });
@@ -267,28 +287,29 @@
                             html = $namelist;
                         }
 
+                        console.log(mid, newFontSize, newTxtWidth)
                         let content = $(`<div class="tablet-element vertical-text "></div>`)
                             .css({
-                                position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: d.fontSize + 'pt', fontFamily: d.fontFamily, "z-index": 9999, visibility: d.isActive
+                                position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'pt',
+                                fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
+                                //"text-align": "justify","text-align-last": "justify",
                                 //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);
                         tabletpaper.append(content);
+                        html = "";
                     }
 
                 })
-                $(canvas).append(tabletpaper);
+
-                console.log(size.width,size.height);
                 let pageStyle = `<style id="pageStyle">
-                   
-
                     @media print{
                         :host {
                             width:auto !important;
                             height:auto !important;
                         }
                         @page {
-                            size:210mm 297mm !important;
+                            size:297mm 210mm  landscape !important;
                             margin:0;
                         }
                         .tablet-paper {
@@ -301,45 +322,49 @@
                             margin: 0 !important;
                             border: none !important;
                         }
+                        .tablet-paper .tablet-element .nameList{
+                            justify-content:center !important;
+                        }
+                        .tablet-paper .tablet-element span{
+                            word-break: break-all !important;
+                        }
                     }
                 `
                 $("#pageStyle").remove();
-                $("head").append(pageStyle
+                $("head").append(pageStyle);
-                );
+
-                $(canvas).css("width", "210" + "mm");
+                $(canvas).append(tabletpaper);
-                $(canvas).css("height","297"+ "mm");
+                $(canvas).css("width", "297" + "mm");
+                $(canvas).css("height", "210" + "mm");
                 $("#printArea").append(canvas);
                 //this.bindKeyEvent();
             });
             $(".tablet-element").draggable({
                 start(e, ui) {
-                    console.log("gogogogo");
+                    //console.log("gogogogo");
                 },
                 stop(e, ui) {
-                    console.log(ui.position.left, ui.position.top);
+                    //console.log(ui.position.left, ui.position.top);
                 }
             });
 
             $(".tablet-element").on("click", function (e) {
                 e.preventDefault();
-                console.log(this);
                 self.selected = $(this);
                 let fontSize = $(this).css("fontSize");
                 let fontFamily = $(this).css("fontFamily");
                 let left = $(this).css("left");
                 let top = $(this).css("top");
-                console.log(fontSize, fontFamily, left, top);
             });
 
             $(".tablet-element").on("contextmenu", function (e) {
                 e.preventDefault();
-                console.log(this);
                 self.selected = $(this);
                 let fontSize = $(this).css("fontSize");
                 let fontFamily = $(this).css("fontFamily");
+                let textWidth = $(this).find("span").first().css("width");
                 let left = $(this).css("left");
                 let top = $(this).css("top");
-                console.log(fontSize, fontFamily, left, top);
                 $("#customMenu").css({
                     top: e.pageY + "px",
                     left: (e.pageX + 30) + "px"
@@ -349,16 +374,69 @@
                 $("#textX").val(self.fix2(left * 0.265));
                 $("#textY").val(self.fix2(top * 0.265));
                 $("#fontSize").val(fontSize);
-                //$("#textWidth").val("");
+                $("#textWidth").val(textWidth);
-                // Show the custom div
                 $("#customMenu").show();
             });
         },
         fix2(val) {
             return Number.parseFloat(val).toFixed(2);
         },
+        getTextWidth(text,font) {
+            const canvas = document.createElement("canvas");
+            const context = canvas.getContext("2d");
+            context.font = font;
+            const metrics = context.measureText(text);
+            return metrics.width/2;
+        },
+         scaleFontSize(txtContent, style, dStyle) {
+            let newTxtWidth = dStyle.textWidth;
+            let newFontSize = dStyle.fontSize;
+            //console.log(newFontSize, newTxtWidth)
+            //自動判斷縮小字型的規則,要同時縮小間距
+            console.log("A:", dStyle, dStyle.fontSize)
+            if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
+                if (txtContent.length > 8) {//這要做成參數，讓使用者設定
+                    switch (txtContent.length - 8) {
+                        case 1:
+                           
+                        case 2:
+                            newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 2) + " " + "DFKai-sb");
+                            newFontSize = (parseInt(dStyle.fontSize) - 2);
+                            break;
+                        case 3:
+                            
+                        case 4:
+                            newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 4) + " " + "DFKai-sb");
+                            newFontSize = (parseInt(dStyle.fontSize) - 4);
+                            break;
+                        case 5:
+                            
+                        case 6:
+                            newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 6) + " " + "DFKai-sb");
+                            newFontSize = (parseInt(dStyle.fontSize) - 6);
+                            break;
+                        case 7:
+                           
+                        case 8:
+                            newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 8) + " " + "DFKai-sb");
+                            newFontSize = (parseInt(dStyle.fontSize) - 8);
+                            break;
+                        default:
+                            break;
+
+                    }
+                }
+            }
+            //console.log(txtContent,style,dStyle)
+            //console.log(newFontSize,newTxtWidth)
+            return { newFontSize, newTxtWidth }
+        },
+        breakWord(txtContent, style, dStyle) {
+            //自動判斷斷字
+            //1. by 特定字 2.by長度
+
+        },
         async changeLocation() {
-            console.log(this.selected);
             $(this.selected).css("left", $("#textX").val() + "mm");
             $(this.selected).css("top", $("#textY").val() + "mm");
         },
@@ -367,11 +445,9 @@
         },
         async changeWidth() {
             let nameList = $(this.selected).find(".nameList").first();
-            console.log("nameList:", nameList);
 
             if (nameList) {
                 let spans = $(nameList).find("span");
-                console.log(spans);
                 if (spans) {
                     spans.each(function (index, x) {
                         $(x).css("width", $("#textWidth").val())
@@ -441,7 +517,7 @@
         /* 關鍵：修正 Ctrl+P 空白問題 */
         @media print {
             @page {
-                size: 210mm 272mm portrait;
+                size: 297mm 210mm landscape;
                 margin: 0;
             }
             html, body, form, .full-home, #printArea, .canvas-area {
@@ -469,115 +545,115 @@
             }
         }
 
-        /* 元素排版樣式 */
+                /* 元素排版樣式 */
-        .tablet-paper {
+                .tablet-paper {
-            position: relative;
+                    position: relative;
-            overflow: hidden;
+                    overflow: hidden;
-            background-repeat: no-repeat;
+                    background-repeat: no-repeat;
-            background-size: 100% 100%;
+                    background-size: 100% 100%;
+                }
+                .tablet-element {
+                    position: absolute !important;
+                    white-space: nowrap;
+                }
+                .vertical-text {
+                    writing-mode: vertical-rl !important;
+                    -webkit-writing-mode: vertical-rl !important;
+                }
+            </style>
+            <style>
+
+            /* 名單金字塔佈局容器 */
+            .roster-container {
+              width: 100%; height: 100%;
+              writing-mode: vertical-rl; /* 直書 */
+              display: flex;
+              /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
+              flex-direction: row;     /* 上下分層 (Top / Bottom) */
+              align-items: center;    /* 左右置中對齊 */
+              justify-content: center;
+              gap: 20px;               /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
+            }
+
+            .roster-row {
+              display: flex;
+              flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
+              justify-content: center;
+              gap: 8px; /* 名字之間的間距 */
+              margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
+            }
+
+            .name-group {
+              display: flex;
+              flex-direction: column;  /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
+              justify-content: center;
+              align-items: center;
+              /* gap 由 HTML 動態綁定 */
+            }
+
+            .roster-name {
+              text-orientation: upright;
+             /*font-weight: bold;*/
+              white-space: nowrap;
+              line-height: 1.2;
+              font-family: 'Kaiti', serif;
+              /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
+              width: fit-content;
+            }
+            .vertical-text {
+                writing-mode: vertical-rl !important;
+                -webkit-writing-mode: vertical-rl !important;
+                text-orientation: mixed !important;
+            }
+
+            /* 【修復底圖沒出現】強制印出背景設定 */
+            * {
+                -webkit-print-color-adjust: exact !important;
+                print-color-adjust: exact !important;
+                color-adjust: exact !important;
+            }
+
+
+            /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
+            .tablet-paper {
+                position: relative !important;
+                margin: 0 auto !important;
+                page-break-after: always !important;
+                box-shadow: none !important;
+                width: var(--page-w);
+                height: var(--page-h);
+            }
+
+            .tablet-element {
+                position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
+                color: black !important; /* 確保文字是黑色的 */
         }
-        .tablet-element {
+
-            position: absolute !important;
+
-            white-space: nowrap;
+         .ancestor-wrapper {
+            /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
+            writing-mode: horizontal-tb;
+            display: flex;
+            flex-direction: column;
+            align-items: center; /* 水平置中 */
+            justify-content: center;
+            width: fit-content;
         }
-        .vertical-text {
+
-            writing-mode: vertical-rl !important;
+        .main-name {
-            -webkit-writing-mode: vertical-rl !important;
+            line-height: 1.2;
+            /* 保持大字 */
         }
-    </style>
-    <style>
 
-    /* 名單金字塔佈局容器 */
+        .sub-text {
-    .roster-container {
+            font-size: 0.6em; /* 縮小字體 */
-      width: 100%; height: 100%;
+            line-height: 1.2;
-      writing-mode: vertical-rl; /* 直書 */
+            margin-top: 4px; /* 與上方林張的間距 */
-      display: flex;
+            white-space: nowrap; /* 避免自動換行 */
-      /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
+            writing-mode:vertical-rl
-      flex-direction: row;     /* 上下分層 (Top / Bottom) */
+        }
-      align-items: center;    /* 左右置中對齊 */
-      justify-content: center;
-      gap: 20px;               /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
-    }
 
-    .roster-row {
+        </style>
-      display: flex;
-      flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
-      justify-content: center;
-      gap: 8px; /* 名字之間的間距 */
-      margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
-    }
-
-    .name-group {
-      display: flex;
-      flex-direction: column;  /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
-      justify-content: center;
-      align-items: center;
-      /* gap 由 HTML 動態綁定 */
-    }
-
-    .roster-name {
-      text-orientation: upright;
-     /*font-weight: bold;*/
-      white-space: nowrap;
-      line-height: 1.2;
-      font-family: 'Kaiti', serif;
-      /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
-      width: fit-content;
-    }
-    .vertical-text {
-        writing-mode: vertical-rl !important;
-        -webkit-writing-mode: vertical-rl !important;
-        text-orientation: mixed !important;
-    }
-
-    /* 【修復底圖沒出現】強制印出背景設定 */
-    * {
-        -webkit-print-color-adjust: exact !important;
-        print-color-adjust: exact !important;
-        color-adjust: exact !important;
-    }
-
-
-    /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
-    .tablet-paper {
-        position: relative !important;
-        margin: 0 auto !important;
-        page-break-after: always !important;
-        box-shadow: none !important;
-        width: var(--page-w);
-        height: var(--page-h);
-    }
-
-    .tablet-element {
-        position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
-        color: black !important; /* 確保文字是黑色的 */
-}
-
-
- .ancestor-wrapper {
-    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
-    writing-mode: horizontal-tb;
-    display: flex;
-    flex-direction: column;
-    align-items: center; /* 水平置中 */
-    justify-content: center;
-    width: fit-content;
-}
-
-.main-name {
-    line-height: 1.2;
-    /* 保持大字 */
-}
-
-.sub-text {
-    font-size: 0.6em; /* 縮小字體 */
-    line-height: 1.2;
-    margin-top: 4px; /* 與上方林張的間距 */
-    white-space: nowrap; /* 避免自動換行 */
-    writing-mode:vertical-rl
-}
-
-</style>
             </head>
             <body>
                 ${canvasHtml}