SVG textLength: ปรับป้ายให้พอดีโดยไม่บิดตัวอักษร

ใช้ textLength กับ lengthAdjust="spacing" เมื่อป้าย SVG ต้องมีความยาวเฉพาะและยอมรับการปรับระยะห่างเล็กน้อยได้ รูปทรงอักษรจะไม่เปลี่ยน หากเลือก spacingAndGlyphs ตัวเรนเดอร์ยืดหรือบีบตัวอักษรตามแนวข้อความได้ สองโหมดนี้กำหนดในข้อกำหนดข้อความ SVG

จุดที่ต้องระวังคือเป้าหมาย: textLength เป็นความยาวที่ขอ ไม่ใช่ความกว้างสูงสุด มันขยายป้ายสั้นได้พอ ๆ กับบีบป้ายยาว และไม่ได้สร้างบรรทัดที่ตัดอัตโนมัติ

แต่ละวิธีปรับเปลี่ยนอะไร

spacing เป็นค่าเริ่มต้นเมื่อตั้ง textLength โดยไม่ระบุ lengthAdjust เอกสารอ้างอิง textLength ของ MDN อธิบายการทำงานร่วมกันของความยาวที่ขอกับโหมดปรับ

สำหรับงานแบรนด์ทั่วไป ให้ปรับเพียงเล็กน้อยและตรวจภาพ ป้ายที่ต้องลดลงมากมักควรใช้ฟอนต์เล็กลง ถ้อยคำสั้นลง หรือพื้นที่จัดวางกว้างขึ้น

ป้ายสั้นกับป้ายยาวที่ใช้เป้าหมายเดียวกัน

เราวาดตรารูปข้าวหลามตัดต้นฉบับและทดสอบป้ายข้อความสองป้ายด้วย Abel Regular ที่ขนาดฟอนต์ 64 หน่วย SVG หลังโหลดฟอนต์ที่ตั้งใจ เบราว์เซอร์วัด PINE ได้ประมาณ 115.6 หน่วย และ PINE & FIELD ได้ 325.3 หน่วย แถวที่ปรับทั้งคู่ขอ 240 หน่วย

เป้าหมายเดียวกัน รูปลักษณ์ตัวพิมพ์ต่างกัน

สำหรับป้ายสั้น spacing สร้างช่องห่างเด่นชัด ส่วนป้ายยาวทำตัวอักษรเบียดกัน รูปอักษรคงเดิมทั้งสองกรณี แต่ไม่มีผลใดเหมาะกับงานออกแบบนี้ แถว spacingAndGlyphs ได้ช่วงความยาวเดียวกันด้วยการเปลี่ยนสัดส่วนฟอนต์ให้เห็นชัด

การทดสอบใช้ Chrome 154 ในเบราว์เซอร์ภายในแอป เราวัดช่วงแนวนอนจากตำแหน่งเริ่มอักษรแรกถึงตำแหน่งจบอักษรสุดท้าย แต่ละแถวที่ปรับได้ประมาณ 240 หน่วย ตัวอย่างใช้ฟอนต์ละตินหนึ่งตัวและข้อความซ้ายไปขวาง่าย ๆ ไม่ใช่การทดสอบความเข้ากันได้ข้ามตัวเรนเดอร์หรือหลายภาษา

ตั้งการแก้ความยาวเพียงเล็กน้อย

สำหรับป้ายยาวด้านบน 330 หน่วยใกล้กับความยาวธรรมชาติ 325.3 หน่วย เป็นตัวอย่างปรับเทียบที่มีประโยชน์กว่าบังคับลดเหลือ 240

ดาวน์โหลด Abel-Regular.ttf และ OFL.txt จากไดเรกทอรี Abel ของ Google Fonts ใส่ในโฟลเดอร์ fonts ข้างไฟล์ HTML ที่มีมาร์กอัปนี้ แล้วให้บริการโฟลเดอร์นั้นในเครื่อง:

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

ค่า 330 ที่ไม่มีหน่วยอยู่ในระบบพิกัด SVG การปรับสเกล SVG ทั้งภาพบนหน้ายังปรับระยะนี้บนจอด้วย เก็บตราและข้อความแยก เพื่อไม่ให้การเปลี่ยนตัวพิมพ์เปลี่ยนภาพวาด

ฟอนต์ยังสำคัญ textLength ไม่ได้แปลงอักษรเป็นเส้นรอบรูปหรือจัดแพ็กเกจฟอนต์ หากรูปอักษรเปลี่ยนบนคอมพิวเตอร์อื่น ให้วินิจฉัยการแทนฟอนต์ SVG ก่อนปรับระยะห่าง

สำหรับความกว้างสูงสุด ให้วัดก่อน

หากกฎคือ “ปล่อยป้ายสั้นไว้ ลดเฉพาะป้ายยาว” ให้เพิ่มเงื่อนไขเอง ตัวอย่างนี้ลด ขนาดฟอนต์ ตัวอักษรจึงคงสัดส่วนขณะเล็กลงทั้งสองมิติ

วางสคริปต์นี้หลัง SVG ด้านบน มันแทนการปรับคงที่ 330 หน่วยด้วยค่าสูงสุด 240 หน่วย:

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready รอให้งานโหลดฟอนต์และจัดวางเอกสารเสร็จ การเรียก load() ชัดเจนขอฟอนต์ที่ตัวอย่างใช้ก่อน การวัดก่อนฟอนต์ที่ตั้งใจโหลดอาจตัดสินใจเรื่องขนาดจากตัวอักษรฟอนต์สำรอง

เราลบ textLength ก่อนเรียก getComputedTextLength() เพราะเงื่อนไขนี้ต้องการความยาวธรรมชาติ ในการทดสอบเบราว์เซอร์ เมธอดยังรายงานความยาวธรรมชาติของแถว spacing แม้ช่วงเริ่มถึงจบที่แสดงเปลี่ยนแล้ว อย่าคิดว่ามันเป็นการวัดความกว้างที่มองเห็นหลังปรับได้ทุกกรณี

ด้วยสคริปต์นี้ ป้ายสั้น PINE คงขนาด 64 หน่วย ป้ายยาวลดเหลือประมาณ 47.2 หน่วย ตรวจผลที่ขนาดแสดงหรือพิมพ์จริง หากคำที่ลดแล้วเล็กเกินไป ให้เปลี่ยนการจัดวางหรือถ้อยคำแทนการลดขนาดไม่สิ้นสุด รันการปรับให้พอดีอีกครั้งเมื่อถ้อยคำหรือการตั้งฟอนต์เปลี่ยน

ตรวจป้ายฉบับสุดท้ายในปลายทาง

ความพอดีเชิงตัวเลขเป็นเพียงการตรวจหนึ่งอย่าง ดูคู่อักษรและช่องระหว่างตรากับข้อความที่ขนาดสุดท้าย รักษาป้ายทั่วไปไว้ที่ระยะห่างธรรมชาติ เว้นแต่งานออกแบบต้องปรับเทียบ

สำหรับหลายบรรทัด ให้สร้างและจัดตำแหน่งบรรทัดโดยตั้งใจ textLength อย่างเดียวไม่มีกฎตัดบรรทัด สำหรับตราโค้ง ใช้กระบวนการข้อความตามพาธ SVG แยกต่างหาก คู่มือนั้นควบคุมเส้นฐานที่ตัวอักษรตาม

เก็บต้นทางที่ข้อความยังแก้ได้ แล้วเปิดไฟล์ส่งมอบในโปรแกรมแก้ไข เบราว์เซอร์ หรือตัวเรนเดอร์ที่จะใช้จริง คู่มือไฟล์ SVG อธิบายว่าทำไม SVG อาจมีข้อความที่แก้ได้ พาธเวกเตอร์ หรือภาพฝัง แม้ใช้นามสกุลเดียวกัน

หากโลโก้เริ่มต้นมีเพียงราสเตอร์ เครื่องมือแปลงโลโก้เป็นเวกเตอร์ของ PerfectVector สร้างภาพของตรากลับมาได้ ตรวจและเก็บงานพาธเหล่านั้น แล้วพิมพ์คำใหม่เป็นข้อความก่อนปรับป้ายให้พอดี คำที่ไล่เส้นเป็นเรขาคณิตพาธ textLength ปรับระยะห่างตัวอักษรของมันไม่ได้ คู่มือแปลงโลโก้เป็นเวกเตอร์ทีละขั้น อธิบายขั้นตอนสร้างต้นทางกลับนี้

คำถามที่พบบ่อย

textLength ลดเฉพาะข้อความที่ยาวเกินไปหรือไม่? ไม่ มันขอความยาว จึงขยายข้อความที่สั้นกว่าตามธรรมชาติได้ด้วย วัดป้ายธรรมชาติแล้วใช้เงื่อนไขของคุณเองเมื่อต้องการกฎความกว้างสูงสุด

lengthAdjust ค่าใดรักษารูปทรงตัวอักษร? ใช้ spacing เพื่อปรับระยะห่างโดยไม่ยืดรูปอักษร การปรับมากยังสร้างช่องห่างแปลกหรือตัวอักษรชนกันได้ จึงตรวจที่ขนาดสุดท้าย

textLength ปรับตัวอักษรที่ไล่เส้นจาก PNG ให้พอดีได้หรือไม่? มันทำงานกับข้อความ SVG ไม่ใช่พาธรูปอักษร พิมพ์ถ้อยคำใหม่เป็นข้อความหากต้องใช้ textLength หรือระยะห่างที่แก้ได้ โดยเก็บตราเป็นภาพเวกเตอร์แยก

แหล่งอ้างอิง

1. W3C — การปรับข้อความ SVG 2 — สองโหมดและผลต่อรูปอักษรกับระยะเลื่อนตัวอักษร
2. MDN — textLength — ความยาวที่ขอและโหมด spacing เริ่มต้น
3. MDN — FontFaceSet.ready — การรอโหลดฟอนต์และจัดวาง
4. MDN — getComputedTextLength — การวัดองค์ประกอบข้อความ SVG
5. Google Fonts — Abel — ฟอนต์และใบอนุญาตที่ใช้ในการเปรียบเทียบต้นฉบับ

สร้างตราราสเตอร์กลับด้วยเครื่องมือแปลงโลโก้เป็นเวกเตอร์ หากจำเป็น แล้วเก็บตัวอักษรเป็นองค์ประกอบข้อความแยก เปรียบเทียบป้ายฉบับสุดท้ายที่ขนาดปกติก่อนทำสำเนาส่งมอบแบบเส้นรอบรูปหรือส่งออกราสเตอร์