"लोअरकेस अंक" (यानी पाठ के आंकड़े) कैसे बनाएं?


12

क्या पाठ के आंकड़ों को अनुकरण करने के लिए फ़ॉन्ट ग्लिफ़ को समायोजित करने का एक स्वीकृत तरीका है ?

यहाँ छवि विवरण दर्ज करें

पृष्ठभूमि

पाठ के आंकड़े "लोअरकेस" अंक हैं। आप आमतौर पर लोअरकेस अंकों का उपयोग करते हैं जहां आप लोअरकेस टेक्स्ट का उपयोग करते हैं (उदाहरण के मध्य में)।

कीबोर्ड कभी अपरकेस और लोअरकेस अंकों के साथ नहीं बनाए गए थे; और यूनिकोड विशेष रूप से उन्हें सांकेतिक शब्दों में बदलना नहीं करता है, क्योंकि "उन्हें अस्तर के आंकड़ों से अलग वर्ण नहीं माना जाता है, केवल एक ही वर्ण लिखने का एक अलग तरीका है।"

जो मुझे मेरे सवाल पर लाता है; किसी फ़ॉन्ट के मानक "अपरकेस" से निचले भाग के आंकड़े बनाने का स्वीकृत तरीका क्या है?

विकिपीडिया में उल्लेख है कि आम तौर पर :

  • 012हैं x-height
  • 68 आरोही हो
  • 34579 अवरोही हैं

यहाँ छवि विवरण दर्ज करें

मेरा पहला प्रयास (फोटोशॉप में) होगा:

  • स्मज 012
  • खिसकाने के 34,579 नीचे
  • 68 छोड़ें जहां वे हैं:

यहाँ छवि विवरण दर्ज करें

यहाँ छवि विवरण दर्ज करें

लेकिन कटे हुए आंकड़े (0, 1, 2) स्पष्ट रूप से अप्रिय दिखते हैं।

यदि यूनिकोड कंसोर्टियम सुझाव देता है कि "लोअरकेस अंक" का निर्माण केवल ते "अपरकेस" से किया जा सकता है - तो वे मुझे क्या करने की सलाह देते हैं?

आदर्श रूप से HTML में

मेरा अंतिम लक्ष्य एक ब्राउज़र में पाठ को प्रदर्शित करना है। मुझे पता है कि कुछ फोंट (जैसे जॉर्जिया) पहले से ही अपने सभी अंकों को लोअरकेस के रूप में प्रदर्शित करते हैं:

यहाँ छवि विवरण दर्ज करें

लेकिन मैं यह नहीं पूछ रहा हूं कि जॉर्जिया का उपयोग करने के लिए कैसे स्विच किया जाए ; मैं पूछ रहा हूँ कि अस्तर के अस्तर का निर्माण कैसे किया जाए ।

और जब से यह वेब पर प्रदर्शन के लिए है, मुझे एहसास है कि मैं शायद प्रति-वर्ण स्वरूपण लागू करना समाप्त करूंगा:

<!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>

के रूप में प्रतिपादन:

यहाँ छवि विवरण दर्ज करें

जो, जैसा कि मुझे लगता है कि यह मनभावन नहीं है।

अरे देखो, एक पैसा!

यहाँ छवि विवरण दर्ज करें

जवाबों:


11

बहुत ही कम जवाब "नहीं" है

ओल्डस्टाइल आंकड़े ("लोअरकेस") विशेष रूप से उस तरह से खींचे जाते हैं। अधिकांश भाग के लिए लिगेसी पोस्टस्क्रिप्ट और ट्रू टाइप फोंट में केवल सारणीबद्ध आंकड़े होते हैं, जो फॉन्ट के डिजाइन के अनुसार अस्तर या पुरानी शैली होते हैं।

यूनिकोड कंसोर्टियम यह सुझाव नहीं दे रहा है कि अस्तर के आंकड़े को पुरानी शैली के आंकड़ों में विकृत किया जा सकता है, बस यह कि अंकों के 0-9 के लिए यूनिकोड मूल्यों का केवल एक सेट है, भले ही प्रत्येक अंक के लिए कई ग्लिफ़ हों।

कई ओपन टाइप फॉन्ट में अस्तर और पुराने दोनों प्रकार के आंकड़े होते हैं, दोनों सारणीबद्ध और आनुपातिक चौड़ाई दोनों में, सारणीबद्ध अस्तर के आंकड़े सामान्य रूप से डिफ़ॉल्ट होते हैं। ये सभी उन अनुप्रयोगों के लिए उपलब्ध हैं जो ओपन टाइप-जागरूक हैं, आमतौर पर एक चरित्र या पैराग्राफ शैली में वरीयता सेटिंग के माध्यम से। वे यूनिकोड मूल्यों को साझा करते हैं, लेकिन वे अलग-अलग तैयार किए गए वैकल्पिक ग्लिफ़ हैं जो फ़ॉन्ट सॉफ़्टवेयर में रूपरेखा के रूप में मौजूद हैं (या नहीं)। (आपके सीएसएस में फ़ॉन्ट परिवारों में, कैलिब्री में पुरानी शैली के आंकड़े हैं, लेकिन सेगो यूआई नहीं है।)

एक टाइपोग्राफिक दृष्टिकोण से, न केवल आप जो पूछते हैं, उसे करने के लिए कोई स्वीकृत तरीका है, मैं कहूंगा कि कोई स्वीकार्य तरीका नहीं है , या तो। जैसा कि आपने खोजा है, बेसलाइन को स्थानांतरित करके और अस्तर के विकृत आंकड़ों को प्राप्त करने की कोशिश भयानक लगती है।


अच्छा जवाब है, लेकिन यह सवाल से भीख माँगता है जब ब्राउज़र पूरी तरह से OpenType- अवगत होंगे, सीएसएस में निर्दिष्ट करने में सक्षम होने के लिए कि किसी फ़ॉन्ट की संख्या का उपयोग करने के लिए कौन सी शैली का उपयोग किया जाता है।
e100

1
यह भी एक महत्वपूर्ण बिंदु है कि गारंटी देने का कोई तरीका नहीं है कि "सेगो यूआई", "कैलीबरी", और न ही सैन्स-सेरिफ़ भी वास्तविक फ़ॉन्ट है। उपयोग की गई सटीक बेसलाइन और x ऊँचाई के मान आर्बिटवर्ल्ड ओल्डे स्टाइल में और भी भयानक लग सकते हैं, जिसे उपयोगकर्ता ने स्थापित किया है।
होरिटो

क्यों यूनिकोड कंसोर्टियम अपरकेस और लोअरकेस अंक के लिए अलग ग्लिफ़ सांकेतिक शब्दों में बदलना नहीं किया, लेकिन पर कोई अंतर्दृष्टि किया अपरकेस के लिए एनकोड अलग ग्लिफ़ A( U+0041,) लोअरकेस a( U+0061), और यहां तक कि sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ ( U+1D00)? यानी अलग-अलग अपरकेस और लोअरकेस अंकों को छोड़कर तर्क क्या हो सकता है, लेकिन इसमें अलग अपरकेस और लोअरकेस अक्षर शामिल हैं?
इयान बॉयड

और अंत में, क्या आप एक ओपन टाइप फ़ॉन्ट को नाम दे सकते हैं जिसमें "अपरकेस" और "लोअरकेस" दोनों अंक हों?
इयान बॉयड

1
@IanBoyd: नियमित रूप से अपरकेस और लोअरकेस वर्ण अर्थ में अलग हैं और इस प्रकार उनके बीच स्विच करना एक स्टाइल पसंद की तुलना में बहुत अधिक है। अपरकेस और लोअरकेस संख्याएँ अर्थ में समान हैं, हालाँकि, और इस तरह बस कुछ भी नहीं है कि यूनिकोड सांकेतिक शब्दों में बदलना चाहता है - उसी कारण से कि इटैलिक, छोटे कैप, लोअरकेस और समान के लिए कोई विशिष्ट एन्कोडिंग नहीं हैं। आपके द्वारा पाए जाने वाले छोटे-कैप वाले अक्षर केवल एन्कोडेड होते हैं, क्योंकि उनका ध्वन्यात्मकता में एक अलग अर्थ होता है और इसे जोर के लिए उपयोग नहीं किया जाना चाहिए (इसके लिए, आपको ओपन टाइप सुविधाओं या इसी तरह का उपयोग करना चाहिए)।
Wrzlprmft

5

लोअरकेस अंक / संख्या या "ओल्डस्टाइल आंकड़े" रेंडर करने का सही तरीका सीएसएस का उपयोग एक उपयुक्त फ़ॉन्ट सुविधा का चयन करने के लिए है। जाहिर है, उपयोग किए गए फ़ॉन्ट को तब इस फ़ॉन्ट सुविधा का समर्थन करना चाहिए। वेबफोन्स के साथ वास्तविक दुनिया का समर्थन बहुत मजबूत नहीं लगता है।

जिस सीएसएस सेटिंग की आपको तलाश है

font-feature-settings: "onum";

और प्रलेखन:

OpenType सुविधाओं का दस्तावेज़ीकरण, और onumविशेष रूप से फ़ीचर, Microsoft के OpenType लेआउट टैग रजिस्ट्री में पाया जा सकता है ।

फ़ॉन्ट सुविधाओं के बारे में वैकल्पिक दस्तावेज़ीकरण सीएसएस में ओपन टाइप सुविधाओं को कोड करने के लिए लेख में उपलब्ध है ।

आधिकारिक तौर पर, आप उपयोग करने वाले हैं

font-variant-numeric: oldstyle-nums;

लेकिन इसके लिए समर्थन मोज़िला के ब्राउज़र संगतता संदर्भ के अनुसार और भी कमजोर लगता है ।

सिद्धांत रूप में यह बेहतर है क्योंकि यह सीधे ओपन टाइप सुविधाओं का उल्लेख नहीं करता है इसलिए इसे गैर-ओपन टाइप फोंट के साथ भी काम करना चाहिए। उसी तरह से आपको उपयोग करना चाहिए:

font-variant: small-caps; 

छोटे कैप को सक्षम करने के लिए । करो नहीं के रूप में इस तरह के स्थापना के ओपन टाइप सुविधा का उपयोग

font-feature-settings: "smcp";

इस प्रभाव को प्राप्त करने के लिए क्योंकि font-variantसंपत्ति पहले से ही अच्छी तरह से समर्थित है।


नहीं, आप कभी भी उपयोग नहीं करना चाहते font-variant: small-caps;क्योंकि इससे FAKE छोटे कैप बनाता है । हमेशा दूसरे का उपयोग करें, और हमेशा ओपन टाइप फोंट का उपयोग करें। सरल और हल।
3

परिभाषा के अनुसार ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ) acceptableयदि small-capsसुविधा फीकी है। यह एक आवश्यकता नहीं है और उच्च गुणवत्ता वाला उपयोगकर्ता एजेंट सही काम करेगा (इसे ओपन टाइप फीचर में मैप करें)। मैं इस बात से सहमत हूं कि अगर आपके पास फेक स्माल कैप के बजाय कोई बदलाव नहीं है, तो आपको उपयोग करना चाहिए font-feature-settings। आमतौर पर नकली छोटे कैप का कोई असर नहीं होने से बेहतर है।
मिक्को रेंटालीनें
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.