पाठ-गठबंधन-सीधा - सीएसएस-ट्रिक्स

text-combine-uprightसीएसएस संपत्ति एक चरित्र की अंतरिक्ष में पात्रों को जोड़ती है। युक्ति इस "क्षैतिज-इन-वर्टिकल" रचना को कॉल करती है जो उपयोग के मामले का वर्णन करने का एक अच्छा तरीका है: ऐसी परिस्थितियां जहां आपको एक ही पंक्ति पर क्षैतिज रूप से प्रदर्शित करने के लिए ऊर्ध्वाधर लेखन मोड में कुछ वर्णों की आवश्यकता हो सकती है।

span ( text-combine-upright: all; )

ऊर्ध्वाधर पाठ के भीतर क्षैतिज पाठ की तकनीक एक जापानी है जिसे टेट-चो-योको कहा जाता है। यहाँ है कि कैसे दिखता है:

जब `writing-mode: vertical-rl;`इस चित्र के बाईं ओर एक ऊर्ध्वाधर बाएं से दाएं लेखन मोड ( ) के साथ काम करते `text-combine-upright`हैं , तो संपत्ति कई पात्रों को ले सकती है और उन्हें क्षैतिज रूप से प्रदर्शित कर सकती है, अनिवार्य रूप से वर्ण वर्णों को समान भागों में विभाजित कर सकती है कि कितने वर्ण चुने गए हैं। इस उदाहरण में, दाईं ओर दो अक्षर एक ही वर्ण स्थान को एक ऊर्ध्वाधर लेखन मोड के अंदर साझा करते हुए दिखाते हैं।

वाक्य - विन्यास

text-combine-upright: none | all | ( digits ? )

प्रारंभिक मूल्य: none
इस पर लागू होता है: गैर-प्रतिस्थापित इनलाइन तत्व
इन्हेरिटेड: हाँ
प्रतिशत: n / a
कंप्यूटेड वैल्यू: निर्दिष्ट कीवर्ड, प्लस पूर्णांक यदिdigits
एनीमेशन प्रकार: एनिमेट नहीं है

मूल्यों

text-combine-upright निम्नलिखित मूल्यों को स्वीकार करता है:

none: यह प्रारंभिक मूल्य है। ऊर्ध्वाधर लेखन मोड में कोई वर्ण क्षैतिज रूप से प्रदर्शित नहीं किया जाता है।
all: ऊर्ध्वाधर वाले बॉक्स में सभी लगातार टाइपोग्राफिक वर्णों को एक ही पंक्ति में क्षैतिज रूप से प्रदर्शित किया जाता है, जो ऊर्ध्वाधर बॉक्स में एकल वर्ण का स्थान लेता है।
digits ?: ऊर्ध्वाधर युक्त बॉक्स में लगातार सभी ASCII अंक क्षैतिज रूप से एक ही लाइन पर प्रदर्शित होते हैं, ऊर्ध्वाधर बॉक्स में एक एकल वर्ण का स्थान लेते हुए, निर्दिष्ट पूर्णांक तक। यदि कोई पूर्णांक विशिष्ट नहीं है, तो डिफ़ॉल्ट 2 अंक है। 2 से नीचे और 4 से ऊपर की कोई भी चीज़ अमान्य है।

/* Keyword values */ text-combine-upright: none; text-combine-upright: all; /* Digits values */ text-combine-upright: digits; /* 2 digits */ text-combine-upright: digits 4; /* 4 digits */ /* Global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset;

प्रयोग

मान लें कि हम उदाहरण लेते हैं जो सीधे कल्पना से है, जो एक ऊर्ध्वाधर लेखन मोड के साथ एक तत्व है।

平成20年4月16日に

date ( writing-mode: vertical-lr; )

ठीक है, हम क्षैतिज रूप से प्रदर्शित होने की तारीख में संख्या चाहते हैं। यह मान लेना तर्कसंगत है कि text-combine-uprightतत्व पर सीधे जोड़ने से चाल चलेगी:

date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )

बुउउउत, बहुत नहीं। लेखन के समय, हमें इस कार्य के लिए संपत्ति को स्वयं अंकों पर लागू करना होगा। एक स्पैन करेगा।

平成20年4月16日に

date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )

हम वहाँ चलें!

ब्राउज़र का समर्थन

जैसा कि हमने अभी उदाहरण में देखा, फिलहाल ब्राउज़र का समर्थन थोड़ा बिखरा हुआ है। हालांकि कई ब्राउज़र कम से कम आंशिक समर्थन की पेशकश करते हैं text-combine-upright, लेकिन digitsमूल्य के लिए मूल्य की तुलना में बहुत कम समर्थन है all।

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
11	12 + ¹	48 + ²	48+	5.1 + ³	35+

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ओपेरा मोबाइल
86+	82 + ²	81+	5 + ³	59+ है

स्रोत: कैनुएज़

गैर-मानक नाम का उपयोग करता है: -ms-text-combine-horizontal
प्रयोगात्मक ध्वज के digitsपीछे के मूल्य को पहचानता है layout.css.text-combine-upright-digits.enabled, लेकिन अभी तक टेट-चो-योको के लिए लेआउट समर्थन को लागू नहीं करता है
गैर-मानक नाम का उपयोग करता है: -webkit-text-combine