Home Aligning characters of different font sizes in CSS
Reply: 0

Aligning characters of different font sizes in CSS

RyanH
1#
RyanH Published in 2017-09-14 09:29:56Z

What I am trying to achieve is to have two separate lines of text, with different font sizes, for which each character lines up well with a character from the other line.

Current state here

span {
  letter-spacing: 0.12em;
  font-family: monospace, ubuntu_monobold, Courier New, monaco, terminal, courier, system;
  font-size: 1em;
}

.highlight {
  display: inline-block;
  width: 0px;
  word-spacing: normal;
}

.small {
  top: .9em;
  padding-bottom: 1px;
  opacity: 0.6;
  font-size: 70%;
  letter-spacing: .45em;
}
<span class="small">gggggggggggggggggggg&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GGGGGGGGGGGGGGG?GGGGG</span>
<span class="big">GGAAGGCCCCACAGCGTCTTCTGTACTATGAGGGGTCTATTACTGTGCCACCTTCTGACA</span>

jsfiddle

letter-spacing: .45em;

Is what I am using to achieve this.

Now the obvious and "easy" solution is to use a table, with a column for each character, however, there can be lots of characters on one line and this would add a lot of elements to the DOM, which I would like to avoid if possible.

So can someone tell me if this is possible using only CSS ?

Thanks

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.376062 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO