From 5f8da123634a2965444b60d287219f8c43015d57 Mon Sep 17 00:00:00 2001 From: minom Date: Tue, 31 Mar 2026 18:03:45 +0800 Subject: [PATCH] =?UTF-8?q?=E9=99=BD=E4=B8=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/admin/print/print_multi_new.aspx | 250 +++++++++++++++++---------- 1 file changed, 156 insertions(+), 94 deletions(-) diff --git a/web/admin/print/print_multi_new.aspx b/web/admin/print/print_multi_new.aspx index 1bde59c..38a72a3 100644 --- a/web/admin/print/print_multi_new.aspx +++ b/web/admin/print/print_multi_new.aspx @@ -32,6 +32,17 @@ .no-print, #customMenu { 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; /* 確保文字方向轉正 */ +} } @@ -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 = $(`
`).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 = $(`${z}`).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", - "z-index": 10000, - "word-break": "break-all" + //"justify-content":"center" }); $namelist.append($span); }); html = $namelist; + } else if (d.elementID === "alive") { + //陽上 + //d.startX + let alive = $("
"); + let yang = $("
") + $(yang).append("陽上") + html = self.renderLiveList(left, d); + + //拜薦 + let bi = $("
") + $(bi).append("拜薦") + + html=$(alive).append(yang).append(html).append(bi); + + //tabletpaper.append(bi) } - console.log(mid, newFontSize, newTxtWidth) + // console.log(mid, newFontSize, newTxtWidth) let content = $(`
`) .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; - } + }*/ } + ` $("#pageStyle").remove(); $("head").append(pageStyle); @@ -381,55 +422,92 @@ fix2(val) { return Number.parseFloat(val).toFixed(2); }, + renderLiveList(names, el) { + let $namelist = $(`
`).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 $(`${name}`).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) { - let newTxtWidth = dStyle.textWidth; - let newFontSize = dStyle.fontSize; + getTextSize(txt, fontsize) { + let span = document.createElement("span"); + 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) - 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("A:", dStyle, dStyle.fontSize) + //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下 + if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) { + let newfontSize = parseInt(fontSize) - 1; + console.log("newfontSize:",newfontSize) + return this.scaleFontSize(txtContent, newfontSize,elementWidth); + } + //} //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; - } - } + background-repeat: no-repeat; + background-size: 100% 100%; + } - /* 元素排版樣式 */ - .tablet-paper { - position: relative; - overflow: hidden; - background-repeat: no-repeat; - 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; - } - -