Bagaimana cara membangun "digit huruf kecil" (yaitu angka teks)?

12

Apakah ada cara yang diterima untuk menyesuaikan font mesin terbang untuk mensimulasikan angka teks ?

masukkan deskripsi gambar di sini

Latar Belakang

Angka teks adalah digit "huruf kecil". Anda biasanya menggunakan digit huruf kecil di mana Anda juga menggunakan teks huruf kecil (misalnya di tengah kalimat).

Keyboard tidak pernah dibuat dengan angka besar dan kecil; dan Unicode tidak secara khusus menyandikannya, karena "mereka tidak dianggap sebagai karakter yang terpisah dari gambar garis, hanya cara berbeda untuk menulis karakter yang sama."

Yang membawa saya ke pertanyaan saya; apa cara yang diterima untuk membuat angka huruf kecil dari standar huruf "yang huruf besar?

Wikipedia menyebutkan bahwa biasanya :

  • 012adalah x-tinggi
  • 68 memiliki ascenders
  • 34579 memiliki keturunan

masukkan deskripsi gambar di sini

Upaya pertama saya (di photoshop) adalah:

  • smush 012
  • mendorong 34579 ke bawah
  • tinggalkan 68 di mana mereka berada:

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

Tetapi angka skwooshed (0, 1, 2) terlihat jelas tidak menyenangkan.

Jika konsorsium Unicode menyarankan bahwa "angka kecil" dapat dengan mudah dibuat dari yang "besar" - apa yang mereka sarankan untuk saya lakukan?

Idealnya dalam HTML

Tujuan akhir saya adalah untuk menampilkan teks huruf kecil di browser. saya tahu beberapa font (misalnya Georgia) sudah menampilkan semua digit sebagai huruf kecil:

masukkan deskripsi gambar di sini

Tapi saya tidak bertanya bagaimana cara beralih menggunakan Georgia ; Saya bertanya bagaimana cara membangun angka garis dari yang non-lapisan.

Dan karena ini untuk tampilan di web, saya menyadari bahwa saya mungkin akhirnya harus menerapkan format per-karakter:

<!doctype html">
<html>
<head>
    <style type="text/css">
        body {
            font-family: "Segoe UI", "Calibri", sans-serif;
            font-size: larger;
        }

        .xheight {
            font-size: 1.5ex;
        }

        .descender {
            position: relative;
            bottom: -0.4ex;
        }
    </style>
</head>
<body>
    <p>In the year <span class="xheight">21</span><span class="descender">5</span><span>6</span> the Romulan war...
</body>
</html>

Rendering sebagai:

masukkan deskripsi gambar di sini

Yang, sekali lagi, tidak terlihat menyenangkan seperti yang saya pikir seharusnya.

Hei, lihat, satu sen!

masukkan deskripsi gambar di sini

typography text resize line-height Ian Boyd
sumber

Jawaban:

11

Jawaban yang sangat singkat adalah "Tidak."

Figur gaya lama ("huruf kecil") secara khusus digambar seperti itu. Font Postscript dan TrueType lama, sebagian besar, hanya berisi angka tabular, yang berjajar atau gaya lama sesuai dengan cara font dirancang.

Konsorsium Unicode tidak menyarankan bahwa gambar garis dapat terdistorsi menjadi angka gaya lama, hanya bahwa hanya ada satu set nilai Unicode untuk angka 0-9, terlepas dari apakah ada beberapa mesin terbang untuk setiap digit.

Banyak font OpenType berisi angka-angka garis dan gaya lama, baik dalam lebar tabular dan proporsional, dengan angka-angka lapisan tabular menjadi default biasa. Ini semua tersedia untuk aplikasi yang sadar OpenType, biasanya melalui pengaturan preferensi dalam gaya karakter atau paragraf. Mereka berbagi nilai Unicode, tetapi mereka secara terpisah ditarik mesin terbang alternatif yang ada (atau tidak) sebagai garis besar dalam perangkat lunak font. (Dari keluarga font di CSS Anda, Calibri memiliki angka-angka gaya lama, tetapi Segoe UI tidak.)

Dari sudut pandang tipografi, tidak hanya tidak ada cara yang diterima untuk melakukan apa yang Anda minta, saya akan mengatakan juga tidak ada cara yang dapat diterima . Seperti yang telah Anda temukan, mencoba untuk sampai ke sana dengan menggeser garis dasar dan mendistorsi angka-angka lapisan tampak mengerikan.

Alan Gilbertson
sumber
Jawaban yang bagus, tetapi tampaknya menimbulkan pertanyaan ketika browser sepenuhnya OpenType-aware, sejauh dapat menentukan dalam CSS gaya angka yang digunakan ketika font mengandung keduanya.
e100
1
Ini juga merupakan poin penting bahwa tidak ada cara untuk menjamin bahwa "Segoe UI", "Calibri", atau bahkan sans-serif adalah font aktual yang ditampilkan. Nilai dasar dan x tinggi yang digunakan mungkin terlihat lebih mengerikan di Arbitrary Olde Style yang telah dipasang pengguna.
horatio
Setiap wawasan tentang mengapa Konsorsium Unicode tidak menyandikan mesin terbang yang terpisah untuk digit huruf besar dan kecil, tetapi apakah menyandikan mesin terbang terpisah untuk huruf besar A( U+0041), huruf kecil a( U+0061), dan bahkan sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ ᴀ( U+1D00)? Yaitu apa yang menjadi alasan yang mengecualikan digit huruf besar dan kecil, tetapi termasuk huruf besar dan kecil terpisah?
Ian Boyd
Dan akhirnya, dapatkah Anda memberi nama font OpenType yang berisi digit "huruf besar" dan "huruf kecil" ?
Ian Boyd
1
@IanBoyd: Huruf besar dan huruf kecil reguler berbeda artinya dan karenanya beralih di antara mereka lebih dari pilihan gaya. Namun, huruf besar dan angka kecil identik artinya, dan karenanya bukan apa-apa yang ingin dikodekan oleh Unicode - untuk alasan yang sama bahwa tidak ada penyandian khusus untuk huruf miring, huruf kecil, huruf kecil dan sejenisnya. Karakter huruf kecil yang Anda temukan hanya disandikan karena mereka memiliki makna berbeda dalam fonetik dan tidak boleh digunakan untuk penekanan (untuk ini, Anda harus menggunakan fitur OpenType atau serupa).
Wrzlprmft
5

Cara yang benar untuk merender digit / angka huruf kecil atau "Angka gaya lama" adalah dengan menggunakan CSS untuk memilih fitur font yang sesuai. Jelas, font yang digunakan kemudian harus mendukung fitur font ini sejak awal. Dukungan dunia nyata dengan webfonts tampaknya tidak terlalu kuat.

Pengaturan CSS yang Anda cari adalah

font-feature-settings: "onum";

dan dokumentasinya:

Dokumentasi fitur OpenType, dan onumfitur khususnya, dapat ditemukan di registri tag OpenType Layout Microsoft .

Dokumentasi alternatif tentang fitur font tersedia di artikel Cara mengkode fitur OpenType di CSS .

Secara resmi, Anda seharusnya menggunakannya

font-variant-numeric: oldstyle-nums;

tetapi dukungan untuk itu tampaknya bahkan lebih lemah menurut referensi Kompatibilitas Browser Mozilla .

Secara teori ini lebih baik karena tidak merujuk langsung ke fitur OpenType sehingga harus bekerja dengan font non-OpenType juga. Dengan cara yang sama Anda harus menggunakan:

font-variant: small-caps;

untuk mengaktifkan topi kecil . Jangan tidak menggunakan pengaturan seperti fitur OpenType

font-feature-settings: "smcp";

untuk mencapai efek ini karena font-variantproperti sudah didukung dengan baik.

Mikko Rantalainen
sumber
Tidak, Anda tidak ingin menggunakannya font-variant: small-caps;karena itu membuat FAKE topi kecil. Selalu gunakan yang lain, dan selalu gunakan font OpenType. Sederhana dan terpecahkan.
tchrist
Menurut definisi ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ) itu acceptablejika small-capsfitur dipalsukan. Itu bukan persyaratan dan agen pengguna berkualitas tinggi akan melakukan hal yang benar (memetakannya ke fitur OpenType). Saya setuju bahwa jika Anda lebih suka tidak memiliki perubahan daripada topi kecil palsu, Anda harus menggunakan font-feature-settings. Biasanya topi kecil palsu lebih baik daripada tidak memiliki efek sama sekali.
Mikko Rantalainen