add small font

docs/.vuepress/components/sector/trangle.vue

@@ -230,8 +230,6 @@
     },
     watch: {
       code() {
-        console.log('hihi')
-
         this.setCode();
       }
     },

docs/.vuepress/components/smallFont.vue

@@ -0,0 +1,176 @@
+<style lang="scss" scoped>
+.compare-container {
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  font-size: 12px;
+  margin-bottom: 30px;
+  .compare-container__wrapper {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+  span {
+    color: #00adb5;
+    margin-right: 5px;
+  }
+}
+.form-item {
+  display: flex;
+  margin-bottom: 15px;
+  align-items: center;
+
+  label {
+    font-size: 14px;
+    flex-shrink: 0;
+    width: 80px;
+  }
+}
+</style>
+
+<template>
+  <div>
+    <div class="compare-container">
+      <div class="compare-container__wrapper">
+        <span>12px字号对比</span>
+        <svg :width="width" :height="height">
+          <text
+            dominant-baseline="baseline"
+            :font-size="fontsize"
+            :y="y"
+            style="line-height: 1; vertical-align: middle;"
+          >
+            {{ content.slice(0, 70) }}
+          </text>
+        </svg>
+      </div>
+    </div>
+
+    <div class="form-item">
+      <label>Content</label>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Less than 70 characters"
+        placement="top-end"
+      >
+        <el-input v-model="content" placeholder="Input content"></el-input>
+      </el-tooltip>
+    </div>
+    <div class="form-item">
+      <label>Fontsize</label>
+
+      <el-input-number
+        size="mini"
+        v-model="fontsize"
+        :min="3"
+        :max="12"
+      ></el-input-number>
+    </div>
+
+    <div class="code language-css extra-class">
+      <pre class="language-css"><code ref="code"></code></pre>
+    </div>
+  </div>
+</template>
+
+<script>
+const fontsizeHeightMap = {
+  1: 1.22,
+  2: 2.52,
+  3: 3.63,
+  4: 5.02,
+  5: 6.03,
+  6: 7.52,
+  7: 8.52,
+  8: 9.14,
+  9: 10.52,
+  10: 11.52,
+  11: 13.02,
+  12: 14
+};
+function getSvgTemplate(fontsize, height, y, content) {
+  return `<svg width="10000" height="${height}">
+  <text
+    dominant-baseline="baseline"
+    font-size="${fontsize}"
+    y="${y}"
+    style="line-height: 1; vertical-align: middle;"
+  >
+    ${content}
+  </text>
+</svg>`;
+}
+import Prism from "prismjs";
+
+export default {
+  name: "small-fontsize",
+  data() {
+    return {
+      fontsize: 10,
+      content: "千山鸟飞绝 - from hill to hill no bird in flight"
+    };
+  },
+  computed: {
+    y() {
+      if (this.fontsize < 3) {
+        return fontsizeHeightMap[this.fontsize].toFixed(2);
+      }
+      if (this.fontsize < 4) {
+        return (fontsizeHeightMap[this.fontsize] - 1).toFixed(2);
+      }
+      return (fontsizeHeightMap[this.fontsize] - 2).toFixed(2);
+    },
+    width() {
+      const div = document.createElement("div");
+      div.style =
+        "posiiton: fixed;left: -10000px;top: -10000;visibility: hidden;";
+      div.id = "small-font-mock-dom";
+      div.innerHTML = getSvgTemplate(
+        this.fontsize,
+        this.height,
+        this.y,
+        this.content
+      );
+
+      document.body.appendChild(div);
+
+      const width = document
+        .querySelector("#small-font-mock-dom text")
+        .getBoundingClientRect()["width"];
+
+      document.body.removeChild(div);
+
+      return width;
+    },
+    height() {
+      return fontsizeHeightMap[this.fontsize];
+    }
+  },
+  methods: {
+    setCode() {
+      this.$nextTick(function() {
+        this.$refs["code"].innerHTML = Prism.highlight(
+          getSvgTemplate(this.fontsize, this.height, this.y, this.content),
+          Prism.languages.html
+        );
+      });
+    }
+  },
+  watch: {
+    fontsize: function() {
+      this.setCode();
+    },
+    content: function() {
+      this.setCode();
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.setCode();
+    });
+  }
+};
+</script>

docs/.vuepress/config.js

@@ -109,7 +109,8 @@ module.exports = {
             children: [
               ["/createTriangle/", "三角形生成器"],
               ["/sector/", "扇形生成器"],
-              ["/hollowOut/", " 卡券生成器"]
+              ["/hollowOut/", " 卡券生成器"],
+              ["/smallFont/", "小于 12px 的文字生成器"]
             ]
           },
           {
@@ -153,7 +154,6 @@ module.exports = {
               ["/remDpi/", "rem, dpi 设置"],
               ["/paper/", "纸页效果"],
               ["/colorShadow/", "彩色阴影"],
-              ["/smallFont/", "小于 12px 的文字"]
             ]
           },
           {
@@ -196,7 +196,8 @@ module.exports = {
             collapsable: false,
             children: [
               ["/_en/createTriangle/", "Triangle generator"],
-              ["/_en/sector/", "Fan generator"]
+              ["/_en/sector/", "Fan generator"],
+              ["/_en/smallFont/", "Less than 12px text generator"],
             ]
           },
           {

docs/_en/smallFont/README.md

@@ -0,0 +1,8 @@
+<smallFont/>
+
+
+:::tip
+Use `svg` as a solution to less than 12px font size of text options:
+1. `transform: the scale ()` disposed occupying area does not change, it is difficult to adjust the alignment.
+2. Use `canvas` can not select the text (can be resolved, but not as good as` svg` concise)
+:::

docs/smallFont/README.md

@@ -1 +1,8 @@
-ceslkj
+<smallFont/>
+
+:::tip
+使用 `svg` 作为解决小于 12px 字号文字的方案：
+
+1. 使用 `transform: scale()` 设置后占位区域并没有改变，难以调节对齐方式。
+2. 使用 `canvas` 无法选中文字（也可以解决，但不如 `svg` 简洁）
+   :::