CSS में सभी टेक्स्ट को वर्टिकली एलाइन कैसे करें?

12

मुद्दा तरह है कि कुछ पत्र प्रतीत हो रहा है g, y, q, आदि एक पूंछ कि ढलानों नीचे की ओर, ऊर्ध्वाधर केंद्रित के लिए अनुमति नहीं देते हैं। यहाँ समस्या दिखाने के लिए एक छवि है ए।

हरे बॉक्स में अक्षर मूल रूप से परिपूर्ण हैं, क्योंकि उनकी कोई नीचे की ओर पूंछ नहीं है। लाल बॉक्स में वे समस्या प्रदर्शित करते हैं।

मैं चाहूंगा कि सभी किरदार पूरी तरह से केंद्र में हों। छवि में, एक नीचे की ओर पूंछ वाले वर्ण लंबवत केंद्रित नहीं होते हैं। क्या यह ठीक करना संभव है?

यहाँ फिडल है जो समस्या को पूर्ण रूप से प्रदर्शित करता है ।

.avatar {
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 125px;
    height: 125px;
    font-size: 60px;
    background-color: rgb(81, 75, 93);
    font-family: "Segoe UI";
    margin-bottom: 10px;
}

.character {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100%;
    color: #fff;
}
<div class="avatar">
  <div class="character">W</div>
</div>

<div class="avatar">
  <div class="character">y</div>
</div>
स्निपेट का विस्तार करें

javascript  html  css  vertical-alignment 
— क्रोन बैग
स्रोत
1
यह एक दिलचस्प सवाल है। इसका उत्तर यहां हो सकता है: iamvdo.me/en/blog/…
— dwjohnston
2
इस मामले में आपको यह परिभाषित करने की आवश्यकता है कि केंद्र क्या है । मेरे लिए y वास्तव में केंद्रित है और A शायद नहीं। चलो बात नहीं करते हैं जब हमारे पास अलग-अलग फ़ॉन्ट-परिवार हैं, तो संरेखण और भी बदतर हो जाएगा
— तैमनी आफि
1
बस इसी तरह से अक्षर काम करते हैं। वे गठबंधन कर रहे हैं, क्योंकि vमें yऔर oमें भाग gबड़े अक्षरों के लिए न्यूनतम बिंदु के रूप में एक ही लाइन पर कर रहे हैं। आपके तर्क के साथ, your, Å, A को A और O के रूप में संयोजित किया जाएगा, लेकिन वे नहीं हो सकते। यदि आप इसके बारे में कुछ विशेष करना चाहते हैं, तो आपको यह जांचने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता है कि क्या यह एक लघु-टोपी है और फिर कुछ वर्णों को कुरेदें।
— रिकाड एलिमैगा
1
मैं उत्सुक हूँ अगर यहाँ एक उपयोगी जवाब है। समस्या यह प्रतीत होगी कि ये वास्तव में केंद्रित हैं। अर्थात। कहते हैं कि आप y और g को ऊपर ले जा सकते हैं, अगर आपके पास लोअरकेस हो तो क्या होगा? वह प्रदर्शन कैसा होना चाहिए?
— dwjohnston
2
किसी भी फ़ॉन्ट संपादक में अपना फ़ॉन्ट खोलें। हर चरित्र को तब तक संपादित करें जब तक कि आप "केंद्रित" के रूप में जो कुछ भी देखते हैं उससे खुश हों । सहेजें और अपने ब्रांड के नए फ़ॉन्ट-परिवार के रूप में उपयोग करें। 15 मिनट से अधिक नहीं लेना चाहिए। मैं कैनवास और सह का उपयोग करते हुए SVG या अन्य चाल के अलावा कोई अन्य समझदार तरीका नहीं देखता। लेकिन मैं इस सवाल के बारे में सोचूंगा।
— रोको सी। बुलजान

जवाबों:

4

यहाँ जेएस का उपयोग करके मेरा समाधान है। यह विचार है कि तत्व को एक छवि में बदलने के लिए पिक्सेल के रूप में उसके डेटा को प्राप्त करने के लिए फिर प्रत्येक वर्ण के ऊपर और नीचे खोजने के लिए उनके माध्यम से लूप करें और संरेखण को ठीक करने के लिए एक अनुवाद लागू करें। यह गतिशील फ़ॉन्ट गुणों के साथ काम करेगा।

कोड अनुकूलित नहीं है, लेकिन यह मुख्य विचार को उजागर करता है:

कोड स्निपेट दिखाएं

अपडेट करें

यहाँ कोड का पहला अनुकूलन है:

var elems = document.querySelectorAll(".avatar");
var k = 0;

for (var i = 0; i < elems.length; i++) {
  domtoimage.toPixelData(elems[i])
    .then(function(im) {
     var l = im.length;
      /* Search for the top limit */
      var t = 0;
      for (var j = 0; j < l; j+=4) {
          if (im[j+1] == 255) { /* Since we know the colors, we can only test the G composant */
            t = Math.ceil((j/4)/125);
            break;
          }
      }
      /* Search the bottom limit*/
      var b = 0;
      for (var j = l - 1; j >= 0; j-=4) {
          if (im[j+1] == 255) {
            b = 125 - Math.ceil((j/4)/125);
            break;
          }
      }
      /* get the difference and apply a translation*/
      elems[k].querySelector('.character').style.transform = "translateY(" + (b - t)/2 + "px)";
      k++;
    });
}
.avatar {
  border-radius: 50%;
  display: inline-flex;
  vertical-align:top;
  justify-content: center;
  align-items: center;
  width: 125px;
  height: 125px;
  font-size: 60px;
  background: 
    linear-gradient(red,red) center/100% 1px no-repeat,
    rgb(81, 75, 93);
  font-family: "Segoe UI";
  margin-bottom: 10px;
}

.character {
  color: #fff;
}
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<div class="avatar">
  <div class="character">W</div>
</div>

<div class="avatar">
  <div class="character">y</div>
</div>

<div class="avatar">
  <div class="character" style="font-size:35px">a</div>
</div>

<div class="avatar">
  <div class="character" style="font-size:25px">2</div>
</div>
<div class="avatar">
  <div class="character">o</div>
</div>
<div class="avatar">
  <div class="character">|</div>
</div>
<div class="avatar">
  <div class="character">@</div>
</div>
<div class="avatar">
  <div class="character">Â</div>
</div>

<div class="avatar">
  <div class="character" style="font-family:arial">Q</div>
</div>
<div class="avatar">
  <div class="character">~</div>
</div>
<div class="avatar">
  <div class="character">8</div>
</div>

<div class="avatar">
  <div class="character">ä</div>
</div>
<div class="avatar">
  <div class="character">ç</div>
</div>

<div class="avatar">
  <div class="character">$</div>
</div>

<div class="avatar">
  <div class="character">></div>
</div>
<div class="avatar">
  <div class="character">%</div>
</div>
स्निपेट का विस्तार करें

मैं इसके लिए डोम-टू-इमेज प्लगइन का उपयोग कर रहा हूं ।

— तमनी अफिफ़
स्रोत
एक घुन धीमी गति से चल रहा है, लेकिन यह अब तक का पहला लगातार काम कर रहा समाधान है। (कैविएट के साथ कि तकनीकी रूप से केंद्रित) अजीब लगता है।)
— ब्रिलियनड
@ ब्रिलियनड मैं स्पष्ट रूप Âसे यह दिखाने के लिए उपयोग किया जाता है कि उसका केंद्रबिंदु इष्टतम नहीं है जैसा कि मैंने उसके उत्तर में टिप्पणी की है;) वह शायद यह देखने के बाद अपना विचार बदल देगा और जिस तरह से फ़ॉन्ट काम करता है उसे स्वीकार करता है
— Temani Afif
यह बहुत अच्छा लग रहा है। मुझे लगता है कि मैं इसका उपयोग करूंगा, अगर मैं इसे और अधिक कुशल बना सकता हूं। वर्तमान में यह थोड़ा धीमा लगता है।
— 2:00 पर क्रोन बैग
@ क्रोनबाग हां आप कोड पर काम कर सकते हैं और इसे अनुकूलित कर सकते हैं, इसके लिए जगह है। मैंने ऐसा नहीं किया क्योंकि इसमें मेरा बहुत समय लगता है और यह वास्तव में प्रश्न का उद्देश्य नहीं है। मैं मुख्य विचार पर ध्यान केंद्रित करना चाहता था। शायद बाद में करेंगे।
— तैमनी अफिफ
@ChronBag ने एक अनुकूलन जोड़ा, थोड़ा तेज़ मुझे लगता है।
— तमनी अफिफ
1

हो सकता है कि कोई बेहतर उत्तर हो, लेकिन यह एक तरह से मैन्युअल रूप से अलग-अलग शैलियों को लागू करने के लिए लगता है, यह इस पर निर्भर करता है:

  • बड़ा अक्षर
  • एक पूंछ के साथ लोअरकेस
  • एक डंठल के साथ लोअरकेस
  • लोअरकेस के साथ न तो

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

ध्यान दें कि यह समाधान कई भाषाओं के समर्थन के लिए काम नहीं करेगा - जैसा कि आपको यह परिभाषित करने की आवश्यकता होगी कि हर एक वर्ण दर्जनों विभिन्न वर्ण सेटों में किस श्रेणी में फिट बैठता है।

const letters = ['a', 'b', 'y', 'X', 'c', 'y', 'A', 'B', 'Y']; 

function getAdditionalClass(char){
    //To do - fill arrays with the rest of the appropriate letters
    if (['y', 'g'].includes(char)) {
        return "tail"; 
    }
    if (['b', 'd'].includes(char)) {
        return "stalk"; 
    }
    
    if (['a', 'c'].includes(char)) {
        return "small"; 
    }
    
    return "capital"; 
}

letters.forEach(v => {
  const avatar = document.createElement("div"); 
  avatar.className = "avatar"; 
  const character = document.createElement("div");
  character.textContent = v; 
  character.className = `character ${getAdditionalClass(v)}`; 
  
  avatar.appendChild(character); 
  
  const root = document.getElementById("root"); 
  
  root.appendChild(avatar); 
  
});
.avatar {
    border-radius: 50%;
    display: block;
    text-align: center;
    width: 125px;
    height: 125px;
    font-size: 60px;
    background-color: rgb(81, 75, 93);
    font-family: "Segoe UI";
    margin-bottom: 10px;
}

.character {
    position: relative;
    transform: translateY(-50%);
    line-height: 100%;
    color: #fff;
}


.small {
    top: 45%; 
}

.stalk {
    top: 50%;
}

.tail {
    top: 41%;
}

.capital {
    top: 50%;
}

#root {
    display: flex; 
    flex-flow: row wrap; 
}
<div id = "root">

</div>
स्निपेट का विस्तार करें

— dwjohnston
स्रोत
मैं कुछ इस तरह से बचने की उम्मीद कर रहा था, लेकिन यह एकमात्र समाधान हो सकता है। अगर और कुछ नहीं आता है, तो मैं शायद इसका इस्तेमाल करूंगा। धन्यवाद
— क्रोन बैग
2
यदि पत्र किसी भी यूनिकोड पत्र (किसी भी वर्णमाला से) हो सकता है, तो यह अविश्वसनीय हो जाता है।
— Brilliand
आप भूल जाते हैं ÂËऔरâë
— तैमनी आफि
आह, अच्छा बिंदु @Billillian मेरे उपयोगकर्ता अपने प्रदर्शन नामों के लिए किसी भी यूनिकोड पाठ का उपयोग करने में सक्षम होंगे, इसलिए यह समाधान और भी भंगुर है।
— क्रोन बैग
0

यह एक मुश्किल स्थिति है!

मैं क्या बता सकते हैं, इस देशी रूप स्केलेबल (यानी बनाने के लिए सबसे मुश्किल होगा %, vwया vhके बजाय मूल्यों pxया em)। यदि आपको मोबाइल या टैबलेट पर यह सुंदर बनाने की आवश्यकता है, तो कृपया @mediaब्रेकपॉइंट के साथ मेरे समाधान का उपयोग करने पर विचार करें।

मेरा समाधान अनिवार्य रूप से पता लगाता है कि यह एक पूंछ के साथ एक निचला तत्व है और पूंछ की भरपाई के लिए ऊंचाई को ऑफसेट करने के लिए एक वर्ग जोड़ता है।

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

यदि आप कोई गड़बड़ करना चाहते हैं और इस समाधान को बदलना / परीक्षण करना चाहते हैं तो एक JSFiddle है ।

var circles = document.getElementsByClassName('circle');
var tails = ['q', 'y', 'p', 'g', 'j'] ;

Array.from(circles).forEach(render);
  
function render(element) { 		
    if(element.innerText == element.innerText.toLowerCase() &&
    	tails.includes(element.innerText)) {
    	element.className += " scale";
    }
}
.circle {
  height: 150px;
  width: 150px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 150px;
  font-size: 50px;
}

.scale {
  line-height: 135px;
}
<div>
  <div class="circle">W</div>
  <div class="circle">X</div>
</div>
<div>
  <div class="circle">y</div>
  <div class="circle">t</div>
</div>
स्निपेट का विस्तार करें

मुझे अपने विचारों को बताएं और अगर मैंने कुछ भी याद किया है। यह इसके लिए एक अंतिम समाधान प्राप्त करने के लिए अच्छा होगा क्योंकि मैंने पिछले दिनों इसी तरह के मुद्दे उठाए हैं!

— ईजीसी
स्रोत
यह dwjohnston के समाधान के समान प्रतीत होता है, और उनके समान ही नुकसान के अधीन है। फिर भी, यह सराहना की जाती है, और मैं अंत में इन पंक्तियों के साथ कुछ और लेकर जा सकता हूं अगर कुछ और आदर्श नहीं आता है।
— क्रोन बैग
मुझे लगता है कि एक अंतिम उपाय के रूप में, आप पिक्सेल की गिनती के रास्ते पर जा सकते हैं - जैसा कि यहां देखा गया है कि जिससे आपको पता चलेगा कि यह पिक्सेल में वास्तविक ऊंचाई है और फिर उपयुक्त ऑफसेट को लागू करें।
— ईजीसी
1
हाँ, मैंने ओपी को टिप्पणियों में उस विचार का उल्लेख किया। शायद जाने का रास्ता है।
— Bag पर क्रोन बैग
आपके विचार को फिर से नोट करने के बारे में क्षमा करें .. बहुत सारी टिप्पणियां, जाहिर है यह याद आया!
— ईजीसी
-1

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

आशा है कि यह आपके लिए समस्या हल करेगा :)

.avatar {
    border-radius: 50%;
    display: block;
    text-align: center;
    width: 125px;
    height: 125px;
    font-size: 60px;
    background-color: rgb(81, 75, 93);
    font-family: "Segoe UI";
    margin-bottom: 10px;
}

.character {
    position: relative;
    top: 50%;
    line-height: 100%;
    color: #fff;
}
.character-lowercase {
  transform: translateY(-60%);
}
.character-capital {
  transform: translateY(-50%);
}
<div class="avatar">
  <div class="character character-capital">W</div>
</div>

<div class="avatar">
  <div class="character character-lowercase">y</div>
</div>
स्निपेट का विस्तार करें

— रग्ना रोल्सडसेट
स्रोत
आपका yध्यान केंद्रित नहीं है। कुछ और बताइए!
— रोको सी। बुल्जन
मुझे भी समय से पहले पता नहीं है कि पत्र क्या होंगे।
— क्रोन बैग
मैं इसे समझता हूं, लेकिन एक स्क्रिप्ट जो यह जांचती है कि पत्र ऊपरी है या कम है और HTML के आधार पर एक सहायक बनाता है जो आसानी से ठीक हो जाएगा :)
— रागना रोल्सडसेट
@RagnaRoaldset मुझे लगता है कि उनका मतलब ऊपरी या निचले मामले से नहीं है। उनका मतलब था कि चरित्र का अलग आकार अभी भी कम है। तुलना करें oऔर yआपको वह मिल जाएगा। पूंछ वाले वर्ण पहली जगह (पोस्ट में उल्लिखित) में समस्या पैदा करते हैं।
— अन्ना
1
आप हमेशा पूंछ के साथ सभी अक्षरों के लिए एक सरणी बना सकते हैं, और यह जांचने के लिए लूप कर सकते हैं कि क्या कक्षा लगाने से पहले div मैचों में पत्र :) लेकिन मुझे यह मिल गया है, बस एक समाधान के साथ आने की कोशिश की :) उम्मीद है कि कोई व्यक्ति साथ आए यह :)
— रागना रोल्सडसेट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.