Untuk memisahkan satu pasangan huruf yang terlalu rapat, periksa dahulu jarak huruf dan kerning fon pada tajuk. Bagi label Latin yang pendek, margin sebaris setempat boleh membuka satu sempadan, tetapi ia mengganggu pembentukan huruf di situ. Aliran kerja Mac ini menerangkan bila pertukaran itu sesuai.

Adakah masalahnya jarak huruf, kerning atau pertembungan setempat?

Panduan ini ditujukan kepada seseorang yang melaraskan tajuk web pada Mac dan boleh mengedit HTML serta CSS-nya. Tugasnya adalah memperbaik satu pasangan yang janggal sambil mengekalkan teks selebihnya dalam aliran biasa pelayar. Tajuk contoh rekaan NOVA STUDIO memberikan contoh konkrit; ini tidak bermakna huruf-huruf itu bertindih dalam setiap fon.

Jarak huruf mengawal jarak di seluruh pilihan teks. CSS menyediakan fungsi ini melalui letter-spacing: nilai positif menambah jarak, manakala nilai negatif merapatkannya. Oleh itu, meningkatkan sifat tersebut pada seluruh tajuk akan mengubah lebih daripada pasangan yang bermasalah. Mula-mula, periksa sama ada nilai negatif yang diwarisi menyebabkan masalah itu. MDN: letter-spacing

Kerning menggunakan maklumat jarak yang disimpan dalam fon. Sifat CSS font-kerning menerima auto, normal atau none; sifat ini tidak menerima jarak tersuai untuk pasangan huruf tertentu. Menetapkannya kepada normal meminta maklumat kerning daripada fon, tetapi tidak dapat membekalkan pelarasan pasangan yang tiada atau menjamin bahawa gabungan tertentu akan kelihatan elok. MDN: font-kerning

Gunakan panduan membuat keputusan ini sebelum menambah penanda:

Perkara yang diperhatikan Tindakan pertama Bila perlu teruskan
Kebanyakan jarak kelihatan terlalu rapat Bandingkan tajuk dengan letter-spacing: normal Teruskan hanya jika satu pasangan masih memerlukan perhatian
Tajuk kelihatan berbeza selepas animasi teks bermula Bandingkan dengan teks asal yang tidak dipecahkan Semak persediaan pemecahan sebelum membuat pelarasan pampasan
Satu sempadan kelihatan terlalu rapat dalam perkataan Latin pendek yang selainnya memuaskan Pertimbangkan pelarasan jarak setempat Terima bahawa pembentukan huruf berubah pada sempadan itu
Pembentukan huruf asal mesti dikekalkan dengan tepat Kekalkan rentetan teks dan bandingkan fon lain atau versi fon yang sesuai Pilih paparan yang berfungsi tanpa menyisipkan sempadan

Pada halaman yang sedang anda periksa dalam Chrome, tekan Command–Option–C, kemudian klik tajuk itu. Panel Elements memilih penandaannya, manakala tab Styles memaparkan CSS yang berkenaan. Cari peraturan tajuk, jarak huruf yang diwarisi dan pembalut di sekeliling aksara individu. Langkah pemeriksaan ini mengikut aliran kerja Mac yang didokumenkan oleh Chrome. Buka Chrome DevTools

Buat perbandingan dengan fon, berat dan saiz tajuk yang dimaksudkan. Pembetulan yang dipilih untuk teks Arial contoh ini hanyalah demonstrasi; pilih pelarasan sebenar sambil melihat tajuk yang dimaksudkan. Catat deklarasi asal supaya anda boleh membandingkan satu perubahan pada satu masa.

Apakah yang dapat dikekalkan oleh pelarasan setempat?

span biasa menyediakan titik gaya tanpa menambah makna tersendiri. Elemen ini mewakili anak-anaknya, jadi tajuk boleh mengekalkan teks NOVA STUDIO sementara kelas mengenal pasti awalan yang berakhir pada sempadan bermasalah. Standard HTML WHATWG: Elemen span

Namun, pembalut sebaris dan pelarasan jarak membawa kesan yang berbeza. Draf Syor Calon CSS Text Level 3 W3C yang terkini menyatakan bahawa pembentukan huruf mesti kekal berterusan merentasi sempadan sebaris tanpa perubahan pemformatan yang berkesan. Dokumen itu juga menyatakan bahawa margin, sempadan atau padding sebaris bukan sifar yang memisahkan aksara akan memutuskan pembentukan huruf pada sempadan tersebut. Oleh itu, margin setempat tidak dapat menjamin kerning asal dikekalkan merentasi pasangan yang dilaraskan. Modul CSS Text Level 3: Pembentukan Huruf Merentasi Sempadan Elemen

Bagi contoh ini, letakkan NOV di dalam satu span sebaris dan biarkan A betul-betul selepasnya. Menambah margin hujung pada awalan itu membuka sempadan V–A. Huruf-huruf lain kekal sebagai teks sebaris biasa; tidak perlu meletakkan setiap aksara dalam kotaknya sendiri. Dalam teks mendatar dari kiri ke kanan, margin-inline-end dipetakan kepada margin kanan. MDN: margin-inline-end

Had ini penting semasa menilai hasilnya: perubahan yang kelihatan merangkumi kehilangan sebarang pelarasan pembentukan huruf merentasi sempadan itu, serta margin yang ditambah. Jarak pasangan asal tidak semestinya dikekalkan dengan tepat bersama jarak yang ditetapkan. Jika pembentukan huruf asal mesti dikekalkan, biarkan rentetan teks utuh dan bandingkan pilihan fon.

Cuba contoh setempat yang lengkap pada Mac anda

Cipta pratonton berasingan sebelum menyesuaikan teknik ini pada tajuk yang anda urus. Dalam TextEdit, pilih File → New, kemudian Format → Make Plain Text. Tampal dokumen lengkap di bawah, simpan sebagai pair-preview.html, dan pilih Use .html jika diminta. Apple mendokumenkan proses ini untuk mencipta fail HTML. Bekerja dengan dokumen HTML dalam TextEdit pada Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

Buka dokumen yang disimpan itu dalam pelayar anda. Kekalkan teks di dalam tajuk pada satu baris sumber seperti yang ditunjukkan: tiada ruang antara NOV dengan A, dan terdapat satu ruang biasa sebelum STUDIO. Ini mengekalkan perkataan label tanpa menyisipkan aksara jarak yang kelihatan atau khas.

Sifat tersuai --pair-gap mengawal margin pada sempadan yang dipilih. Nilai permulaannya hanyalah ilustrasi. Pada saiz fon 64px, 0.02em mewakili margin sebanyak 1.28 piksel CSS; pada 40px, nilainya ialah 0.8 piksel CSS. Margin itu berubah mengikut saiz teks, tetapi pelarasan visual tetap perlu diperiksa. MDN mendokumenkan bahawa margin em adalah relatif kepada saiz teks. MDN: margin-inline-end

Span .keep-word di bahagian luar menggunakan white-space: nowrap pada NOVA sahaja. Ini mengekalkan perkataan pendek itu bersama-sama sambil membiarkan ruang biasa sebelum STUDIO tersedia untuk pembalutan. Elakkan daripada menerapkannya pada seluruh tajuk kecuali anda memang memerlukan satu baris yang tidak terputus. MDN: white-space

Jika TextEdit kemudian membuka fail itu sebagai kandungan berformat, gunakan File → Open, pilih fail, pilih Show Options, kemudian pilih Ignore rich text commands. Sebagai alternatif, aktifkan Display HTML files as HTML code instead of formatted text di bawah TextEdit → Settings → Open and Save. Panduan HTML TextEdit Apple

Bagaimanakah anda memilih pembetulan paling kecil yang berguna?

Gunakan perbandingan terkawal dan bukannya terus menambah jarak sehingga menarik perhatian:

  1. Tetapkan --pair-gap kepada 0em, simpan dan muat semula. Periksa tajuk tanpa pelarasan dahulu.
  2. Cuba 0.01em, kemudian 0.02em, dengan menyimpan dan memuat semula antara perbandingan. Ini nilai percubaan, bukan piawaian tipografi yang disyorkan.
  3. Nilai pasangan itu bersama huruf-huruf yang bersebelahan dengannya. Berhenti apabila jaraknya sesuai dengan irama keseluruhan perkataan.
  4. Kecilkan lebar tetingkap pelayar sehingga tajuk terbalut. Periksa keseluruhan tajuk, bukan hanya huruf yang dilaraskan.
  5. Ulangi untuk setiap saiz dan berat tajuk yang benar-benar digunakan dalam reka letak anda.

Nilai perbandingan antara margin sifar dan bukan sifar dengan teliti. Melepasi ambang itu mewujudkan sempadan pembentukan huruf yang diterangkan tadi, jadi perubahan pertama mungkin lebih besar daripada yang dibayangkan oleh nilai margin. Jika nilai positif yang kecil pun sudah menjadikan pasangan itu terlalu renggang, buang penyelesaian sementara itu dan pertimbangkan semula fon atau gaya sedia ada pada tajuk.

Pelarasan itu juga menggunakan ruang reka letak. Huruf-huruf selepas sempadan bergerak bersama teks, dan tajuk yang hampir memenuhi lebar tersedia mungkin terbalut secara berbeza. Jarak setempat mengelakkan penambahan jarak huruf pada setiap sela; namun, ia tidak dapat menjamin hujung baris kekal sama. Periksa reka letak abstrak dalam bentuk sempit dan lebar sebelum mengekalkan suntingan itu.

Hadkan pembalut tanpa pemisah baris kepada satu perkataan pendek. Jika perkataan itu sendiri melebihi lebar yang tersedia, ia boleh melimpah. Kurangkan saiz tajuk untuk reka letak itu atau pertimbangkan semula pembalut tersebut, bukannya menyembunyikan limpahan. MDN membezakan kawalan pembalutan melalui white-space daripada sifat yang membenarkan pemisahan di dalam perkataan. MDN: white-space

Bagaimana jika tajuk itu sudah menggunakan SplitType?

SplitType ialah utiliti animasi yang membalut baris, perkataan dan aksara dalam elemen. Dokumentasi rasminya mengesyorkan font-kerning: none pada elemen sasaran untuk mengelakkan sedikit anjakan aksara semasa pemecahan atau pemulihan. Saranan itu berkaitan dengan aliran kerja animasinya; penggunaannya boleh mengubah jarak di seluruh tajuk. Dokumentasi SplitType

Jika tajuk sedia ada menggunakan SplitType, bandingkan teks asal sebelum menambah pelarasan lain. Pustaka itu mendokumenkan kaedah tika, instance.revert(), yang memulihkan kandungan asal. Dalam pelaksanaan yang sudah memiliki tika SplitType, gunakan kitar hayat yang didokumenkan untuk memeriksa keadaan asal itu. Contoh HTML setempat di atas tidak bergantung pada pustaka tersebut. SplitType: Memulihkan Teks Terpisah

Periksa juga tingkah laku apabila saiz berubah. SplitType menyatakan bahawa pemisahan perkataan dan aksara yang diletakkan secara relatif boleh mengalir semula, manakala pemisahan baris atau kedudukan mutlak memerlukan pemisahan semula selepas saiz bekas berubah. Jika pertembungan yang kelihatan hanya berlaku selepas perubahan lebar, periksa tingkah laku reka letak itu sebelum menetapkan pembetulan pasangan secara kekal. SplitType: Teks Responsif

Bagi tugas yang melibatkan satu pasangan huruf ini, kesimpulan praktikalnya ialah elakkan pemisahan aksara semata-mata untuk mendapatkan pemegang jarak. Ia menambah lebih banyak sempadan reka letak daripada yang diperlukan oleh contoh ini.

Bilakah anda patut mengekalkan rentetan teks tanpa gangguan?

Gunakan contoh margin setempat hanya untuk sempadan yang dipilih dengan sengaja antara huruf Latin ringkas. Jangan jadikannya rutin yang membalut setiap kedudukan rentetan. W3C memberi amaran bahawa pemisahan gugusan grafem atau ligatur dengan sempadan elemen boleh menghasilkan paparan yang tidak konsisten atau tidak diingini. Kedudukan aksara dalam rentetan tidak semestinya tempat yang sesuai untuk memutuskan pembentukan huruf. Modul CSS Text Level 3: Aksara dan Huruf

Apabila pembentukan huruf yang tepat mesti dikekalkan, biarkan tajuk sebagai teks berterusan, bandingkan tetapan kerning asalnya dan pilih paparan fon yang memaparkan pasangan itu dengan memuaskan. Jika pengecualian setempat yang terkawal boleh diterima, tambahkan satu sempadan, gunakan margin terkecil yang berguna dan periksa perkataan serta pemisah baris yang terhasil bersama-sama.

Sumber