2016-04-06 7 views
5

मेरे पास एक ऐसा एप्लिकेशन है जो टेक्स्ट को इंटरैक्टिव रूप से हाइलाइट करने के लिए <mark> टैग का उपयोग करता है। चूंकि उपयोगकर्ता माउस को ड्रैग करता है, यह उपयोगकर्ता को चयन दिखाने के लिए दस्तावेज़ में टेक्स्ट नोड्स को लपेटता है और अनचाहे करता है। जब चयनित श्रेणी किसी शब्द के मध्य में समाप्त होती है, तो चिह्न शब्द के केवल भाग से घिरा होता है। यदि सीमा एक कर्नेड जोड़ी के बीच है, तो कर्नाई अक्षम है।टैग सीमाओं पर कर्नाई जारी रखें

यहाँ एक उदाहरण है:

p { font-size: 30pt; margin: 0; line-height: 26pt; }
<p>There <mark>are 1</mark>1 entries.</p> 
 
<p>There are 11 entries.</p>

पहले पैराग्राफ में, < निशान> टैग दो "1" अंकों के बीच समाप्त होता है। दूसरे अनुच्छेद में < चिह्न के बिना एक ही पाठ है। मतभेदों को और अधिक दृश्यमान बनाने के लिए पैराग्राफ को एक साथ लाने के लिए फ़ॉन्ट आकार, मार्जिन और लाइन-स्पेसिंग समायोजित किया जाता है।

बिना 0 के < चिह्न के साथ 1s के बीच और अधिक जगह है। चूंकि यह एप्लिकेशन में अंतःक्रियात्मक रूप से होता है, क्योंकि उपयोगकर्ता 1s से माउस को ड्रैग करता है, उसके बाद के पाठ को दाईं ओर स्थानांतरित किया जाता है जब वे 1 के बीच होते हैं और फिर जब वे अगले चरित्र को पीछे छोड़ देते हैं। पाठ की "jiggling" कष्टप्रद हो सकता है।

वहाँ किसी भी तरह से एक कर्निंग सीमा के रूप में मार्क टैग के इलाज के लिए ब्राउज़र बता नहीं करने के लिए है? शायद एक फ़ॉन्ट-फीचर-सेटिंग?

उत्तर

2

ठीक है, आप पूरी तरह कर्निंग बंद कर सकते हैं ... मुझे लगता है कि सबसे करीब आप प्रभाव नहीं देख पाने के लिए जा रहे हैं है, कर्निंग के बाद से सीमा हमेशा टैग सीमा पर होगी।

p { font-size: 30pt; margin: 0; line-height: 26pt; font-kerning: none; } 
 
mark { margin: 0; font-kerning: none; }
<p>There <mark>are 1</mark>1 entries.</p> 
 
<p>There are 11 entries.</p>

+0

मुझे संदेह है कि आप सही हैं कि यह सबसे अच्छा होगा जो मैं कर सकता हूं। मैं उम्मीद कर रहा था कि हो सकता है कि उन कम ज्ञात सीएसएस गुणों में से एक हो (जैसे फ़ॉन्ट-फीचर-सेटिंग, जिसमें एक बेजियन छोटे जटिल विकल्प हैं) जो ब्राउज़र को कर्नलिंग के प्रयोजनों के लिए सीमा को अनदेखा करने के लिए कहेंगे। यह स्पष्ट है कि ब्राउज़र _do_ कर सकता है, क्योंकि ब्राउजर की अपनी हाइलाइटिंग यह करती है (उदाहरण के लिए चिह्नित क्षेत्र का चयन करने के लिए अपने माउस का उपयोग करें, कर्नाई में कोई बदलाव नहीं), इसलिए मुझे लगा कि मैं पहुंच जाऊंगा। – scottb

0

मैं इसके बारे में "cleans" फिक्स के लिए खोज कर रहा हूं लेकिन मुझे केवल margin संपत्ति के साथ एक तरीका पता चला है।

Check this out

mark { margin: 0 -1pt; } 

आशा है कि यह मदद करता है

+1

यह वही है कर्निंग साधन नहीं है। कर्निंग विशिष्ट चरित्र जोड़े से संबंधित है। –

+0

आप मुझे कुछ सीखते हैं, मुझे 'फ़ॉन्ट-कर्निंग' संपत्ति नहीं पता था! –

1

::selection छद्म तत्व का उपयोग चयनित पाठ का हाइलाइटिंग नियंत्रित करने के लिए।

यदि आप अपने mark टैग डालना चाहते हैं, तो आप चयन प्रक्रिया समाप्त होने के बाद ऐसा कर सकते हैं। उस बिंदु पर आप टैग सीमाओं पर कर्नाई खो देंगे, लेकिन कम से कम आप उपयोगकर्ता को चुनने के रूप में झुकाव नहीं देखेंगे।

::selection { 
 
    background-color: yellow; 
 
}
There are 11 entries.<br/> 
 
There are 11 entries.

+0

यह इस मामले में काम नहीं करेगा। कोई चयनित पाठ नहीं है (उस अर्थ में), इसलिए :: चयन छद्म-तत्व मेरे मामले में कुछ भी संदर्भित नहीं करता है। – scottb

+0

मैं उलझन में हूँ। जब उपयोगकर्ता माउस को ड्रैग करता है, तो पाठ वास्तव में चुना जाता है, और ':: चयन' छद्म-तत्व वास्तव में उस चयनित पाठ को संदर्भित करता है। क्या आप मुझे बता सकते हैं कि मुझे क्या याद आ रही है? –

+0

मैं विशेष रूप से मोबाइल वातावरण - आईओएस पर काम कर रहा हूं। चयन इस तरह से काम नहीं करते हैं - उपयोगकर्ता को स्पर्श करना और पकड़ना है, फिर परिणामी "हैंडल" को स्थानांतरित करना है। मुझे टेक्स्ट चुनने के लिए एक सरल बातचीत की ज़रूरत है, इसलिए मैं एक बना रहा हूं। – scottb

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