2010-10-19 24 views
5

मैं जावास्क्रिप्ट का उपयोग बाएं-संरेखित पाठ की अवधि को बढ़ाने के लिए कर रहा हूं जब तक कि यह इसके कंटेनर को भरता न हो, या जब तक यह ऊंचाई या चौड़ाई में परिवर्तनीय थ्रेसहोल्ड तक नहीं पहुंच जाता। इस प्रक्रिया के परिणामस्वरूप व्यापक रूप से भिन्न font-size है।पिक्सेल-सटीक टेक्स्ट संरेखण

मेरी समस्या यह है कि, कुछ पात्रों के साथ, बाईं ओर पैडिंग की एक छोटी सी मात्रा होती है ... और आमतौर पर यह ध्यान देने योग्य नहीं है, बहुत बड़े फ़ॉन्ट आकार के साथ यह 10 पिक्सल या उससे अधिक तक पहुंच सकता है।

मैं विभिन्न पात्रों पर प्रभाव को प्रदर्शित करने के लिए एक पृष्ठ को कोसा: http://jsfiddle.net/kBu7S/

पाठ अवधि, एक डिजाइन जहां हर दूसरे तत्व पेज नीचे जा रहा बाएँ किनारे करने के लिए पिक्सेल के लिए पिक्सेल गठबंधन है में मौजूद है तो यह है बड़े टेक्स्ट आकारों के साथ बहुत दृष्टि से विचलित।

क्या कोई पैडिंग की मात्रा की गणना करने का तरीका सोच सकता है, ताकि मैं अवधि की सापेक्ष स्थिति को टक्कर दे सकूं? या शायद एक सीएसएस समाधान भी है? (letter-spacing और word-spacing का कोई प्रभाव नहीं है।)

मैं स्वीकार करूंगा कि यहां तक ​​कि एक गंदा समाधान भी असंभव लगता है ... हालांकि आपके विचार के लिए धन्यवाद।

उत्तर

3

पैडिंग को अक्सर प्रकार के "कंधे" कहा जाता है, और यह टाइपफेस के डिजाइन के लिए आंतरिक है। इसका मुकाबला करने का कोई आसान तरीका नहीं है, क्योंकि यह सही जगह टाइप करने के लिए ऑप्टिकल कारणों के लिए है। आखिरकार, यदि आप IIIIIII टाइप करते हैं, तो आपको पूंजी I के बीच कुछ अंतर होना चाहिए, और यह केवल इस पैडिंग से आता है। WWWWWW जैसे अन्य पात्रों को किसी की आवश्यकता नहीं है।

आपकी सबसे अच्छी शर्त अपने टाइपफेस के साथ एक प्रयोग करना है, और प्रत्येक चरित्र पर वास्तविक पैडिंग को मापना है, फिर अपने पैडिंग में एक टेबल मैपिंग वर्ण बनाएं। फिर आप चरित्र की स्थिति को समायोजित कर सकते हैं। यह बहुत काम है, लेकिन मुझे नहीं पता कि आप और क्या कर सकते हैं।

+0

कंधे! यही वह कहलाता है। मैं आपको यह भी नहीं बता सकता कि मैंने उस पैडिंग के नाम पर Google को कितने अलग तरीके से करने का प्रयास किया। मुझे अभी काम से घर मिला है, लेकिन विभिन्न कंधों (शायद प्रतिशत के रूप में) मैपिंग के बारे में आपका विचार सुबह के लिए एक अच्छा प्रारंभिक बिंदु है ... – JKS

+0

क्या यह केवल स्थानीय रूप से काम नहीं करेगा? – Ben

+0

"स्थानीय रूप से"? मुझे नहीं पता तुम्हारा क्या मतलब है। –

0

ठीक है, आप एक ही आकार के साथ एक ही आकार के साथ एक छवि उत्पन्न करने के लिए एक स्क्रिप्ट बना सकते हैं (सफेद पृष्ठभूमि पर काला) और बाएं किनारे से बाएं किनारे से पहले काले पिक्सेल तक दूरी की गणना करने के लिए बिटमैप पढ़ें।

यह एक तरह का ओवरकिल है, लेकिन यह एकमात्र चीज है जिसे मैं सोच सकता हूं।

+0

यह पूरा प्रश्न बहुत अधिक है :) विचार के लिए धन्यवाद। – JKS

1

इस बेला पर काम किया:

#text:first-letter { margin-left:-3px}

तुम एक वर्ग के लिए है कि विस्तार कर सकता है ...

.fontCorrection:first-letter { margin-left:-3px }

... और यह के रूप में उपयुक्त लागू होते हैं।

+0

मेरे लिए काम नहीं किया। बस अक्षरों को बाईं ओर स्थानांतरित कर दिया, लेकिन यदि आप अपना आकार बढ़ाते हैं, तो अभी भी अंतर की एक अलग मात्रा है। – davr

+0

फिर वृद्धि फ़ंक्शन में सीएसएस नियम को बदलने के लिए जावास्क्रिप्ट का उपयोग करें। आपका समाधान कहां है? – Ben

+0

असल में '# टेक्स्ट: पहला अक्षर {मार्जिन-बाएं: -0.05em; } 'एक बुरा अनुमान नहीं है - लेकिन अभी भी काफी करीब नहीं है। विचार के लिए धन्यवाद ... – JKS

संबंधित मुद्दे