陽上

web/admin/print/print_multi_new.aspx

@@ -33,6 +33,17 @@
                 display: none !important;
             }
 
+            .yangshang-wrapper {
+    display: flex !important;
+    flex-direction: column !important; /* 垂直堆疊 */
+    justify-content: space-between !important; /* 陽上與拜薦各據頂底 */
+    align-items: center !important; /* 水平方向置中 */
+    height: 100% !important;
+    width: 100% !important;
+    writing-mode: vertical-rl !important; /* 確保內部文字均為垂直書寫 */
+    text-orientation: upright !important; /* 確保文字方向轉正 */
+}
+            
         }
     </style>
 </head>
@@ -239,12 +250,19 @@
                 mid_items.forEach(y => {
                     mid.push(y.fam_name);
                 });
+                let left = []
+                left_items.forEach(y => {
+                    left.push(y.fam_name);
+                });
+
  
-                console.log("details:", details);
                 details.forEach(d => {
                     if (d.isActive != "hidden") {
                         //console.log(d);
-                        let { newFontSize, newTxtWidth } = self.scaleFontSize(mid, style, d)
+                        //let { newFontSize, newTxtWidth } = self.scaleFontSize(mid, style, d)
+           
+                        let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
+          
                         let html = "";
                         if (d.elementID === 'title1') {
                             let $namelist = $(`<div class='nameList'></div>`).css({
@@ -257,41 +275,63 @@
                                 height: `${d.height}px`,
                                 border: "0px solid #ccc",
                                 padding: "1px",
-                                "font-family": "DFKai-sb",
+                                "font-family": "BiauKai",
                                 "letter-spacing": "0.1em",
                                 "column-gap": "1px",
                                 "row-gap": "1px",
                                 "align-items": "center",
-                                "justify-content":"center"
+                                "justify-content": "space-between",
+
+
                             });
 
                             mid.forEach(z => {
-                                
+                                let info = self.getTextInfo(z, newFontSize);
+                                let spanWidth = mid.length > 1 ? newFontSize : d.width
+                                let height = d.textHeight;
+                                if (info.width >= d.textHeight) {
+                                    height = d.height;
+                                }
                                 let $span = $(`<span>${z}</span>`).css({
                                     display: "block",
-                                    "min-height": `${d.textHeight}px`,
+                                    "min-height": `${height}px`,
                                     "max-height": `${d.height}px`,
-                                    //width: newTxtWidth +"px", //`${d.textWidth}px`,
+                                    "max-width": `${spanWidth}px`,
+                                    //width: `${newFontSize}px`,
                                     "text-align": "justify",
                                     "text-align-last": "justify",
-                                    "margin-bottom": "20px",
+                                    "margin-bottom": "40px",
                                     "margin-left": "5px",
                                     "text-justify": "inter-character",
-                                    //"font-size": newFontSize + "px",
+                                    //"justify-content":"center"
-                                    "z-index": 10000,
-                                    "word-break": "break-all"
                                 });
                                 $namelist.append($span);
                             });
 
                             html = $namelist;
+                        } else if (d.elementID === "alive") {
+                            //陽上
+                            //d.startX
+                            let alive = $("<div class='yangshang-wrapper '></div>");
+                            let yang = $("<div class='yang'></div>")
+                            $(yang).append("<span>陽上</span>")
+                            html = self.renderLiveList(left, d);
+                            
+                            //拜薦
+                            let bi = $("<div class='bi'></div>")
+                            $(bi).append("<span>拜薦</span>")
+
+                            html=$(alive).append(yang).append(html).append(bi);
+
+                            //tabletpaper.append(bi)
                         }
 
-                        console.log(mid, newFontSize, newTxtWidth)
+                       // 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: newFontSize + 'pt',
                                 fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
+                                "align-items":"center"
                                 //"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
                             })
@@ -312,7 +352,7 @@
                             size:297mm 210mm  landscape !important;
                             margin:0;
                         }
-                        .tablet-paper {
+                        /*.tablet-paper {
                             width: ${size.width}mm ;
                             height: ${size.height}mm;
                             position: relative !important;
@@ -327,8 +367,9 @@
                         }
                         .tablet-paper .tablet-element span{
                             word-break: break-all !important;
+                        }*/
                     }
-                    }
+                    </style>
                 `
                 $("#pageStyle").remove();
                 $("head").append(pageStyle);
@@ -381,55 +422,92 @@
         fix2(val) {
             return Number.parseFloat(val).toFixed(2);
         },
+        renderLiveList(names, el) {
+            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": "0.1em",
+                "column-gap": "1px",
+                "row-gap": "1px",
+                "align-items": "center",
+            });
+            let self = this;
+            //$namelist.append("陽上");
+            names.forEach(n => {
+                $namelist.append(self.renderLiveSpan(n, el))
+            })
+            //$namelist.append("拜薦");
+            return $namelist;
+        },
+        renderLiveSpan(name, el) {
+            return $(`<span>${name}</span>`).css({
+                display: "block",
+                "min-height": `${el.textHeight}px`,
+                "max-height": `${el.height}px`,
+                width: `${el.textWidth}px`,
+                "text-align": "justify",
+                "text-align-last": "justify",
+                "margin-bottom": "15px",
+                "margin-left": "5px",
+                "text-justify": "inter-character",
+            });
+        },
+        getTextInfo(text,font) {
+            const canvas = document.createElement("canvas");
+            const context = canvas.getContext("2d");
+            context.font = font;
+            const metrics = context.measureText(text);
+            return metrics
+        },
         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;
+          
+            return metrics;
         },
-         scaleFontSize(txtContent, style, dStyle) {
+        getTextSize(txt, fontsize) {
-            let newTxtWidth = dStyle.textWidth;
+            let span = document.createElement("span");
-            let newFontSize = dStyle.fontSize;
+            span.style.visibility = "hidden";
+            span.style.position = "absolute";
+            span.style.fontSize = fontsize + "px";
+            span.style.fontFamily = "";
+            span.innerText = txt;
+            document.body.appendChild(span);
+            let result = {
+                width: span.offsetWidth,
+                height: span.offsetHeight
+            }
+            //console.log("result:",result);
+            document.body.removeChild(span);
+            return result;
+        },
+         scaleFontSize(txtContent, fontSize,elementWidth) {
+
+             let font = this.getTextSize("講", parseInt(fontSize));
+             console.log("scaleFontSize:", fontSize, " A:", font, " B:", Math.ceil((txtContent.length) / 2), " C:", font.width, elementWidth, (Math.ceil(txtContent.length / 2) * font.width)*2)
             //console.log(newFontSize, newTxtWidth)
             //自動判斷縮小字型的規則,要同時縮小間距
-            console.log("A:", dStyle, dStyle.fontSize)
+           // console.log("A:", dStyle, dStyle.fontSize)
-            if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
+             //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
-                if (txtContent.length > 8) {//這要做成參數，讓使用者設定
+             if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
-                    switch (txtContent.length - 8) {
+                 let newfontSize = parseInt(fontSize) - 1;
-                        case 1:
+                 console.log("newfontSize:",newfontSize)
-                           
+                 return this.scaleFontSize(txtContent, newfontSize,elementWidth);
-                        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 }
+             return fontSize;
         },
         breakWord(txtContent, style, dStyle) {
             //自動判斷斷字
@@ -511,6 +589,7 @@
                 margin-bottom: 30px;
                 box-shadow: 0 0 10px rgba(0,0,0,0.5);
                 background-color: white;
+                text-align:justify;
             }
         }
 
@@ -542,26 +621,28 @@
                 page-break-after: always !important;
                 margin: 0 !important;
                 border: none !important;
-            }
-        }
-
-                /* 元素排版樣式 */
-                .tablet-paper {
-                    position: relative;
-                    overflow: hidden;
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
             }   
+
             .tablet-element {
                 position: absolute !important;
-                    white-space: nowrap;
+                white-space: normal;
+                 color: black !important; /* 確保文字是黑色的 */
            }
+          }
+
+            /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
+            .tablet-paper {
+                width: var(--page-w);
+                height: var(--page-h);
+            }
+                
             .vertical-text {
                 writing-mode: vertical-rl !important;
                 -webkit-writing-mode: vertical-rl !important;
+                    text-orientation: mixed !important;
             }
-            </style>
-            <style>
 
             /* 名單金字塔佈局容器 */
             .roster-container {
@@ -594,17 +675,12 @@
             .roster-name {
               text-orientation: upright;
              /*font-weight: bold;*/
-              white-space: nowrap;
+              white-space: normal;
               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;
-            }
 
             /* 【修復底圖沒出現】強制印出背景設定 */
             * {
@@ -614,20 +690,6 @@
             }
 
 
-            /* 【修復排版沒照設定】覆寫原本 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 {
@@ -649,7 +711,7 @@
             font-size: 0.6em; /* 縮小字體 */
             line-height: 1.2;
             margin-top: 4px; /* 與上方林張的間距 */
-            white-space: nowrap; /* 避免自動換行 */
+            white-space: normal; /* 避免自動換行 */
             writing-mode:vertical-rl
         }