6

I want to achieve this design: example

Note that both text are perfectly top aligned but I'm almost sure this is impossible to achieve in CSS in a scalable way (I mean not hardcoding pixels with position relative/top for example).

Using flex looked like a good way to achieve this but since this is text, the top alignment is correct but based on the text 'bounding box' but the letters '77' don't take up 100% height of that box, causing it to not be perfectly aligned.

I understand why this happens since letter 'a' doesn't take up the same space as letter 'X' but I was just wondering if someone can find out a very nice tricky to achieve this design.

Here are my two attempts at this: 

div#a {
  
  background:#EEE;
  line-height: 1;
}


span {
  vertical-align: text-top;
}

#b {
  display: flex;
  align-items: flex-start;
}

 
 <div id="a">
        <span style=" font-size: 48px;">77</span>
        <span style="font-size:14px;;">USD</span>
    </div>

<div id="b">
  <div style=" font-size: 48px; line-height: 48px;">77</div>
  <div style=" font-size: 14px;">USD</div>
</div>

(please note there is a related issue but they didn't want 'perfect' alignment like this)

AlfaTeK
  • 7,487
  • 14
  • 49
  • 90

2 Answers2

7

I think you can use this approach and tuning the line-height property.

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  margin-bottom: 10px;
}

div .container span {
  line-height: 60%;
}
<div id="a">
  <div class="container">
    <span style=" font-size: 48px;">77</span>
  </div>
  <div class="container">
    <span style="font-size:14px;">USD</span>
  </div>
</div>

<div id="b">
  <div class="container">
    <span style=" font-size: 48px;">100</span>
  </div>
  <div class="container">
    <span style="font-size:14px;">USD</span>
  </div>
</div>
Pablo Darde
  • 5,844
  • 10
  • 37
  • 55
  • That looks amazing and somewhat scalable (you can change font-sizes with success). Is there a rationale behind this or just testing it out until you got it right? It seems you found like the % of height that the numbers occupy on the 'text bounding box'. Obviously this could change for different font family and if instead of 100 you try to type 'xyz'. Still a bit better than just position relative/top the elements – AlfaTeK Mar 13 '19 at 02:15
  • Hi @AlfaTeK, You are right. I found the percent number that fits better inside the bounding box. There isn't any trick here. It's just trial and error. Texts are boring, they have different `line-height` and is very difficult to deal with. – Pablo Darde Mar 13 '19 at 02:19
0

MDN documentation indicates that modifying the value of span { vertical align: text-top; } by replacing text-top with super (or *50% to shift the baseline) will help you accomplish your objective!

I learned this while preparing to suggest that you replace the aforementioned declaration with the HTML <sup> tag, which enables 'superscript' on specified inline text.

Check out documentation and decide what works best for your project~ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup

Mister Moody
  • 114
  • 1
  • 10
  • I fail to see how that works: https://jsfiddle.net/zpf0cxkt/ doesn't seem to work. – AlfaTeK Mar 14 '19 at 04:25
  • Try modifying the HTML ```

    77 USD

    ``` and adding a ```line-height``` rule with a value of ```2em```. Although not best practice, I like how the `````` tag displays content under circumstance similar to yours!     – Mister Moody Mar 14 '19 at 05:14