migrate to new git
This commit is contained in:
158
web/print.html
Normal file
158
web/print.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Print</title>
|
||||
<!-- 引入 jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- 引入 Vue.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 標楷體;
|
||||
}
|
||||
div.text-sample {
|
||||
/* 折行
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
*/
|
||||
/* 超過範圍不顯示不折行 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.fs-1in-in { font-size: 1in; }
|
||||
.fs-1in-mm { font-size: 25.4mm; }
|
||||
.fs-1in-pt { font-size: 72pt; }
|
||||
.fs-1in-px { font-size: 96px; }
|
||||
.fs-10px { font-size: 10px; }
|
||||
.fs-12px { font-size: 12px; }
|
||||
.fs-14px { font-size: 14px; }
|
||||
.fs-16px { font-size: 16px; }
|
||||
.fs-20px { font-size: 20px; }
|
||||
.fs-36px { font-size: 36px; }
|
||||
.fs-48px { font-size: 48px; }
|
||||
.fs-60px { font-size: 60px; }
|
||||
.fs-72px { font-size: 72px; }
|
||||
.fs-96px { font-size: 96px; }
|
||||
|
||||
.fs-6pt { font-size: 6pt; }
|
||||
.fs-8pt { font-size: 8pt; }
|
||||
.fs-10pt { font-size: 10pt; }
|
||||
.fs-12pt { font-size: 12pt; }
|
||||
.fs-16pt { font-size: 16pt; }
|
||||
.fs-20pt { font-size: 20pt; }
|
||||
.fs-24pt { font-size: 24pt; }
|
||||
.fs-36pt { font-size: 36pt; }
|
||||
.fs-72pt { font-size: 72pt; }
|
||||
.fs-96pt { font-size: 96pt; }
|
||||
|
||||
.fs-2mm { font-size: 2mm; }
|
||||
.fs-4mm { font-size: 4mm; }
|
||||
.fs-6mm { font-size: 6mm; }
|
||||
.fs-8mm { font-size: 8mm; }
|
||||
.fs-10mm { font-size: 10mm; }
|
||||
.fs-20mm { font-size: 20mm; }
|
||||
.fs-30mm { font-size: 30mm; }
|
||||
.fs-40mm { font-size: 40mm; }
|
||||
.fs-50mm { font-size: 50mm; }
|
||||
</style>
|
||||
<style>
|
||||
.boxes>div {
|
||||
width: 50mm;
|
||||
height: 10mm;
|
||||
margin-bottom: 2mm;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.boxes>.b-1px { border-width: 1px; }
|
||||
.boxes>.b-2px { border-width: 2px; }
|
||||
.boxes>.b-3px { border-width: 3px; }
|
||||
.boxes>.b-4px { border-width: 4px; }
|
||||
.boxes>.b-5px { border-width: 5px; }
|
||||
.boxes>.b-10px { border-width: 10px; }
|
||||
.boxes>.b-20px { border-width: 20px; }
|
||||
.boxes>.b-30px { border-width: 30px; }
|
||||
.boxes>.b-pt-25 { border-width: 0.25pt; }
|
||||
.boxes>.b-pt-50 { border-width: 0.5pt; }
|
||||
.boxes>.b-pt-75 { border-width: 0.75pt; }
|
||||
.boxes>.b-pt-100 { border-width: 1pt; }
|
||||
.boxes>.b-pt-200 { border-width: 2pt; }
|
||||
.boxes>.b-pt-300 { border-width: 3pt; }
|
||||
.boxes>.b-mm-25 { border-width: 0.25mm; }
|
||||
.boxes>.b-mm-50 { border-width: 0.5mm; }
|
||||
.boxes>.b-mm-75 { border-width: 0.75mm; }
|
||||
.boxes>.b-mm-100 { border-width: 1mm; }
|
||||
.boxes>.b-mm-200 { border-width: 2mm; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="boxes" v-if="true">
|
||||
<div v-for="(bClass, index) in bClasses" :key="index" :class="bClass">
|
||||
{{index}}.{{bClass}}
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(fsClass, index) in fsClasses" :key="index" class="text-sample">
|
||||
<div>{{index}}.{{fsClass}}</div>
|
||||
<div :class="fsClass">
|
||||
<div>國圍東來三五ａｂ１２ＡＢ</div>
|
||||
<div>AB12abXIWxiw Quick Brown</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const { createApp } = Vue;
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
fsClasses: [
|
||||
'fs-1in-in', 'fs-1in-mm', 'fs-1in-pt', 'fs-1in-px',
|
||||
'fs-10px', 'fs-12px', 'fs-14px', 'fs-16px', 'fs-20px',
|
||||
'fs-36px', 'fs-48px', 'fs-60px', 'fs-72px', 'fs-96px',
|
||||
'fs-6pt', 'fs-8pt', 'fs-10pt', 'fs-12pt', 'fs-16pt',
|
||||
'fs-20pt', 'fs-24pt', 'fs-36pt', 'fs-72pt', 'fs-96pt',
|
||||
'fs-2mm', 'fs-4mm', 'fs-6mm', 'fs-8mm', 'fs-10mm',
|
||||
'fs-20mm', 'fs-30mm', 'fs-40mm', 'fs-50mm'
|
||||
],
|
||||
bClasses: [
|
||||
'b-1px', 'b-2px', 'b-3px', 'b-4px', 'b-5px',
|
||||
//'b-10px', 'b-20px', 'b-30px',
|
||||
'b-pt-25', 'b-pt-50', 'b-pt-75', 'b-pt-100', 'b-pt-200', 'b-pt-300',
|
||||
'b-mm-25', 'b-mm-50', 'b-mm-75', 'b-mm-100', 'b-mm-200'
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const fontSizes = [];
|
||||
const borderSizes = [];
|
||||
this.fsClasses.forEach(className => {
|
||||
const size = $(`.${className}`).css('font-size');
|
||||
const classNum = parseFloat(className.match(/\d+/)[0]);
|
||||
const pxNum = parseFloat(size);
|
||||
fontSizes.push({
|
||||
class: className,
|
||||
computedSize: size,
|
||||
classNumber: classNum,
|
||||
pxNumber: pxNum,
|
||||
ratio: (classNum / pxNum).toFixed(3)
|
||||
});
|
||||
});
|
||||
this.bClasses.forEach(className => {
|
||||
const size = $(`.${className}`).css('border-width');
|
||||
const classNum = parseFloat(className.match(/\d+/)[0]);
|
||||
const pxNum = parseFloat(size);
|
||||
borderSizes.push({
|
||||
class: className,
|
||||
computedSize: size,
|
||||
classNumber: classNum,
|
||||
pxNumber: pxNum,
|
||||
ratio: (classNum / pxNum).toFixed(3)
|
||||
});
|
||||
});
|
||||
console.table(fontSizes);
|
||||
console.table(borderSizes);
|
||||
}
|
||||
}).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user