फ़ॉन्ट आकार सीएसएस-मूल्यों छाया डोम जड़ के आधार पर

मुद्दे का संक्षिप्त विवरण:फ़ॉन्ट आकार सीएसएस-मूल्यों छाया डोम जड़ के आधार पर

मैं फ़ॉन्ट आकार के आधार मूल्यों एक में (एक उन्हें-मूल्य के लिए कुछ संपत्ति निर्धारित करने के समान) स्थापित करने के लिए एक तरह से देख रहा हूँ छाया होस्ट में मूल तत्व के फ़ॉन्ट आकार के बावजूद छाया मेजबान के सापेक्ष एक छाया डोम के अंदर तत्व। रिम-वैल्यू कैसे काम करते हैं, लेकिन एचटीएमएल रूट की बजाय छाया के रूप में छाया के समान कुछ।

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

मुद्दे का विस्तृत वर्णन:

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

एक अच्छा समाधान रूट ईएम (रीम) पर सामान आधारित है, इसलिए डोम का एक स्तर बदलना उप-तत्वों को प्रभावित नहीं करता है। हालांकि, अगर मैं एक ही पृष्ठ पर अन्य तत्वों को प्रभावित किए बिना इस रैपिंग तत्वों (एक स्थान पर) के अंदर सभी पाठों के आकार को बड़ा/छोटा करना चाहता हूं, तो मुझे सभी फ़ॉन्ट-आकारों के रिम-वैल्यू को बढ़ाने/कम करने की आवश्यकता होगी उस रैपिंग तत्व के अंदर तत्व।

मैंने हाल ही में छाया डोम और टेम्पलेट्स के साथ वेब घटक देखना शुरू कर दिया। टेम्पलेट-टैग में, सीएसएस encapsulated है जो महान है क्योंकि उस बॉक्स/विजेट/घटक का डिज़ाइन शेष डिजाइन, अवांछित विरासत मूल्यों और इस तरह के बारे में सोचने के बिना अपने आप पर स्टाइल किया जा सकता है। आखिरकार एक वेबपृष्ठ बनाने के लिए स्वतंत्र घटकों को बनाने का एक अच्छा तरीका। लेकिन अगर मैं टेम्पलेट के लिए एक प्रकार का टेम्पलेट रूट फ़ॉन्ट आकार सेट कर सकता तो बहुत अच्छा होगा। इसलिए यदि मैं टेम्पलेट के अंदर कुछ तत्व फ़ॉन्ट-आकार 2rem (या किसी अन्य समान इकाई) के रूप में सेट करता हूं, तो मेजबान में फ़ॉन्ट आकार के बावजूद, उस तत्व का फ़ॉन्ट-आकार टेम्पलेट का रूट फ़ॉन्ट आकार 2x होगा तत्व जहां उस टेम्पलेट का उपयोग किया जाता है, और पृष्ठ की रूट (HTML तत्व) के फ़ॉन्ट आकार के बावजूद।

जब मैंने टेम्पलेट के अंदर रिम-वैल्यू के साथ परीक्षण किया, तो यह अभी भी पेज रूट (एचटीएमएल टैग) फ़ॉन्ट-साइज पर आधारित था। मैंने vw-values का भी परीक्षण किया है लेकिन यह पूरे व्यूपोर्ट पर भी आधारित है, न केवल encapsulated क्षेत्र (छाया रूट)।

मैंने छाया डोम के बारे में बहुत सारे लेख देखे हैं, लेकिन मुझे इस मुद्दे पर कोई समाधान नहीं मिला है। कोई सुझाव?

क्या होता है (सरलीकृत उदाहरण):

<html style="font-size: 16px"> 
    <body style="font-size: 12px"> 
     I am 12px large 

     <!-- em, based on the body in this case --> 
     <div style="font-size: 1.5em"> 
      I am 18px large 

      <div style="font-size: 1.5em"> 
       I am 27px large 
      </div> 
     </div> 

     <!-- rem, based on the styles of the html element --> 
     <div style="font-size: 1.5rem"> 
      I am 24px large 

      <div style="font-size: 1.5rem"> 
       I am 24px large 
      </div> 
     </div> 
    </body> 
</html>

मुझे क्या करना चाहते हैं: (: जड़ ऊपर के उदाहरण का हिस्सा) सभी रिश्तेदार font- नियंत्रित करने के लिए

<html style="font-size: 16px"> 
    <body style="font-size: 12px"> 
     I am 12px large 

     <div style="font-size: 1.5em"> 
      I am 18px large 
     </div> 
     <div style="font-size: 1.5rem"> 
      I am 24px large 
     </div> 

     <template> <!-- Simulates that it is inserted into the DOM by using shadow elements --> 
      <style> 
       :root{ /* Or something like that */ 
        font-size: 20px; /* This is the simulated "template root fontsize" */ 
       } 
      </style> 

      <div style="font-size: 1.5trem"> <!-- Based on the template root fontsize --> 
       I am 30px large 

       <div style="font-size: 2trem"> 
        I am 40px large 
       </div> 
      </div> 

     </template> 
    </body> 
</html>

यह एक ही स्थान पर देना होगा उस घटक के अंदर आकार, और फिर इसे गैर-रिश्तेदार फ़ॉन्ट-आकार जैसे पीएक्स या अन्य सामान्य सीएसएस मानों के साथ जोड़ा जा सकता है।

स्रोत

2014-07-25 henit

:host चयनकर्ता शैलियों को रूट करता है जो छाया रूट होस्ट करता है। बाहरी सीएसएस/शैलियों के साथ मेजबान तत्व को स्टाइल करने के समान ही प्रभाव पड़ता है (उदाहरण के लिए <div id="rootelm" style="font-size:20px"></div> नीचे दिए गए उदाहरण के लिए)। यदि आप अपने नकली :root चयनकर्ता के बजाय :host का उपयोग करते हैं, तो आपको उम्मीद के अनुसार काम करना चाहिए।

<!DOCTYPE HTML> 
<html style="font-size: 16px"> 
    <body style="font-size: 12px"> 
     I am 12px large 

     <div style="font-size: 1.5em"> 
      I am 18px large 
     </div> 
     <div style="font-size: 1.5rem"> 
      I am 24px large 
     </div> 

     <div id="rootelm"></div> 

     <template id="testtemplate"> 
      <style> 
       :host{ /* Our new selector */ 
        font-size: 20px; /* This is the "template root fontsize" */ 
       } 
      </style> 
      <div style="font-size: 1em"> 
       I am 20px large 
       <!-- Absolute size for comparison --> 
       <div style="font-size: 20px">I am 20px large as well</div> 
       <div style="font-size: 2em"> 
        I am 40px large 
        <!-- Absolute size for comparison --> 
        <div style="font-size: 40px">I am 40px large as well</div> 
       </div> 
      </div> 
     </template> 

     <script> 
      var shadow = document.querySelector('#rootelm').createShadowRoot(); 
      var template = document.querySelector('#testtemplate'); 
      shadow.innerHTML = template.innerHTML; 
     </script> 
    </body> 
</html>

plunker

संपादित करें: जे एस के साथ अपडेट किया गया plunker फ़ॉन्ट तत्व यह है कि छाया जड़ को होस्ट करता है के सापेक्ष आकार बनाने के लिए यहाँ एक उदाहरण है। स्क्रिप्ट नीचे पुन: उत्पन्न होता है।

function updateFontSizes() { 
     //Get root element. If you had more than one, you could use querySelectorAll(), and loop over the resulting array 
     var rootElm = document.querySelector("#rootelm"); 
     /*Get styled elements. If you were using external styles instead of inline, 
      you'd have to use getComputedStyle or another method of getting CSS */ 
     var styledElms = rootElm.shadowRoot.querySelectorAll('[style]'); 
     //Get the root font size (the font size applied to the element containing the template) 
     var rootFontSize = window.getComputedStyle(rootElm, null).getPropertyValue("font-size"); 
     //Format root fontsize. If you are using different units, change the string in IndexOF 
     rootFontSize = parseFloat(rootFontSize.substring(0, rootFontSize.indexOf('px')).trim()); 
     for (var i = 0; i < styledElms.length; i++) { 
      //Get relative font size index of units 
      var unitIndex = styledElms[i].style.fontSize.indexOf('rem'); 
      //Get custom attribute that we will fill later 
      var oldFS = styledElms[i].getAttribute("oldfs"); 
      //if font-size contains the relative units 
      if (unitIndex > -1) { 
       //Store relative font size in custom attribute 
       styledElms[i].setAttribute("oldfs",styledElms[i].style.fontSize); 
       //Set fontsize to relative font size * computed root font size 
       styledElms[i].style.fontSize = parseFloat(styledElms[i].style.fontSize.substring(0, unitIndex).trim()) * rootFontSize + "px"; 
      } 
      //If font size doesn't contain the relative units, and we stored the old relative font size 
      else if (oldFS !== null) { 
       //Set the fontsize to old relative font size * computed root font size 
       styledElms[i].style.fontSize = parseFloat(oldFS.substring(0, oldFS.indexOf('rem')).trim()) * rootFontSize + "px" 
      } 
     } 
    } 

    //Media query listeners 
    //See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries for more info 
    var mql = window.matchMedia("(max-width: 500px)"); 
    mql.addListener(handleMediaQuery); 
    handleMediaQuery(mql); 

    function handleMediaQuery(mql) { 
     updateFontSizes(); 
    }

स्रोत

2014-08-13 16:50:02 quantumwannabe

इससे समस्या हल नहीं होती है। मैं माता-पिता की परवाह किए बिना, छाया रूट के आधार पर फ़ॉन्ट आकार आधारित मान सेट करना चाहता हूं। फिर मैं सभी उप तत्वों पर मीडिया प्रश्नों के बजाय मीडिया क्वेरी के साथ टेम्पलेट रूट को नियंत्रित कर सकता हूं। एम-वैल्यू एचटीएमएल रूट पर पैरेंट, रीम-वैल्यू पर आधारित होते हैं। मेरे उदाहरण में, एचटीएमएल फ़ॉन्ट आकार 16 है, और टेम्पलेट रूट 20 है। मैं एक तत्व को 1.5x टेम्पलेट रूट फ़ॉन्ट आकार में सेट करने में सक्षम होना चाहता हूं (जैसे कि "मैं अपने उदाहरण में 30px बड़ा हूं) और एक उप माता-पिता की परवाह किए बिना 2x टेम्पलेट रूट (40 पीएक्स) होने के लिए - (30 पीएक्स है)। – henit

@henit मुझे विश्वास नहीं है कि केवल सीएसएस के साथ संभव है, लेकिन यह जावास्क्रिप्ट के साथ किया जा सकता है। मैंने एक स्क्रिप्ट के साथ उत्तर और [plunker] (http://plnkr.co/edit/P1KOZ4NGmpycGgCgRpSq?p=preview) अपडेट किया है जो रेम फ़ॉन्ट आकार को छाया रूट के सापेक्ष बदलता है। प्लंबर को पॉप आउट करें और मीडिया क्वेरी में बदलाव देखने के लिए विंडो का आकार बदलें। – quantumwannabe

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

आपका सबसे अच्छा विकल्प सीएसएस में एक डोम तत्व बनाना है जिसमें मूल विशेषताएँ हैं जिन्हें आप शुरू करना चाहते हैं और सीएसएस का उपयोग करके उस तत्व परिवर्तन के उप आइटम को अपने सीएसएस के आधार पर बदल सकते हैं। आप सीएसएस में एक डोम तत्व टेम्पलेट बना सकते हैं और इसे आधार शैली दे सकते हैं।

सीएसएस फ़ाइल

template{ 
    font-size: 20px; 
}

html फ़ाइल

<template> 
    <div style="font-size: 1.5trem"> 
     I am 30px large 
     <div style="font-size: 2trem"> 
      I am 40px large 
     </div> 
    </div> 
</template>

यह किसी भी डोम तत्व font-size 20px और सभी उप डोम तत्वों के लिए टेम्पलेट नामित सेट हो जाएगा पेरेंट तत्व के आधार पर बदल जाएगा। तत्वों पर इनलाइन शैली का उपयोग न करने का भी प्रयास करें, सीएसएस चयनकर्ता आपके लिए बहुत काम कर सकते हैं। वेब घटक दस्तावेजों की समीक्षा के बाद

स्रोत

2014-08-21 21:47:39

ऐसा लगता है (अगर मैं गलत हूं तो मुझे सही करें) हो सकता है कि आप वेब घटक नामक एचटीएमएल 5 तकनीक से परिचित न हों, छाया डोम, टेम्पलेट्स और अन्य सहित मानकों का एक सेट। थीज़ प्रौद्योगिकियों का उद्देश्य बिल्कुल एम्बेड, आईफ्रेम और इसी तरह के तरीकों से सामग्री डालने से बचने के लिए है। यह पृष्ठ वेब घटक की अवधारणाओं को समझाता है: http://css-tricks.com/modular-future-web-components/ – henit

छाया डोम केवल क्रोम, ओपेरा, एंड्रॉइड ब्राउज़र, एंड्रॉइड के लिए क्रोम में काम करता है। तो यह आईई, फ़ायरफ़ॉक्स, सफारी, आईओएस सफारी, ओपेरा मिनी में काम नहीं करेगा। "छाया डोम" के लिए बहुत कम उपयोग होता है जब आप जानते हैं कि किसी तत्व पर सीएसएस कैसे सेट करें और कैसे गुण DOM पेड़ को पार करते हैं। मेरा उदाहरण फ़ॉन्ट आकार सेट करता है, इसलिए टेम्पलेट के सभी बच्चे DOM तत्व तब टेम्पलेट से उत्तराधिकारी होंगे जो वास्तव में आपके द्वारा प्रश्न में इच्छित आउटपुट होगा। छाया डॉम स्थिति भी "विचार के तहत" पत्थर में स्थापित नहीं है। –

प्रश्न के आधार पर वेब घटक की आवश्यकता नहीं है और अधिक है। सरल सीएसएस समाधान पूरी तरह से समर्थित फ़ंक्शन का उपयोग किये बिना इस समस्या को हल कर सकते हैं। –

। आप जो करना चाहते हैं उसका आपका उदाहरण वेब घटक की तरह कुछ नहीं दिखता है। निम्नलिखित वेब घटक उदाहरण देखें।

अपने दस्तावेज़ के शीर्ष लेख में

आप शरीर में

<link rel="import" href="web_component_name.html"></link>

होता आप

<my-web-component>Bob</my-web-component>

अपने वेब घटक तो उसकी अपनी फ़ाइल होता होगा।

<html> 
    <template id="nameTagTemplate"> 
    <style> 
    .outer { 
     border: 2px solid brown; 
     border-radius: 1em; 
     background: red; 
     font-size: 20pt; 
     width: 12em; 
     height: 7em; 
     text-align: center; 
    } 
    .boilerplate { 
     color: white; 
     font-family: sans-serif; 
     padding: 0.5em; 
    } 
    .name { 
     color: black; 
     background: white; 
     font-family: "Marker Felt", cursive; 
     font-size: 45pt; 
     padding-top: 0.2em; 
    } 
    </style> 
    <div class="outer"> 
     <div class="boilerplate"> 
     Hi! My name is 
     </div> 
     <div class="name"> 
     <content></content> 
     </div> 
    </div> 
    </template> 
    <script> 
    var importDoc = document.currentScript.ownerDocument; 
    var nameBadgePrototype = Object.create(HTMLElement.prototype); 
    nameBadgePrototype.createdCallback = function() { 
     var shadow = this.createShadowRoot(); 
     var template = importDoc.querySelector('#nameTagTemplate'); 
     shadow.appendChild(template.content.cloneNode(true)); 
    }; 
    document.registerElement("my-web-component", { 
     prototype: nameBadgePrototype 
    }); 
    </script> 
</html>

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

स्रोत

2014-08-27 15:10:15

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

मैं मानता हूं कि डब्ल्यूसी अभी तक उत्पादन वातावरण के लिए उपयुक्त नहीं है। हालांकि, यह आपके द्वारा जो कहा गया उससे थोड़ा अधिक समर्थित है। शैडो डोम क्रोम 25+ (35 से अपने वेबकिट-उपसर्ग के साथ) में समर्थित है, v37 वर्तमान नवीनतम गैर-बीटा संस्करण है। कस्टम तत्व क्रोम 33+ में समर्थित है। एचटीएमएल टेम्पलेट क्रोम 26+ और फ़ायरफ़ॉक्स 22+ (एफएफ 31 नवीनतम होने) में समर्थित है। पॉलिमर प्रोजेक्ट ने जावास्क्रिप्ट-पॉलीफिल जारी किए हैं जो कार्यों को सभी प्रमुख ब्राउज़रों के दो नवीनतम संस्करणों में काम करते हैं। मैंने अभी तक पॉलीफिल का परीक्षण नहीं किया है। – henit

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

फ़ॉन्ट आकार सीएसएस-मूल्यों छाया डोम जड़ के आधार पर

उत्तर

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