Aligning Text on a Specific Character

Aligning text on a specific character

One way of achiveing this is to place spans around the words on the left and right side of the hyphen.
Then you can add a min-width to these to make them equal width which will put the hyphen in the center.

Fiddle

.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;

}
.progress-ww span {
    display:inline-block;
    width:100px;
    text-align:left;
}
.progress-ww span:first-of-type {
    text-align:right
}

<section>
    <div class="progress-ww">
        <div>
            <div><span>lopen</span> - <span>ik loop</span></div>
            <div><span>klimmen</span> - <span>ik klim</span></div>
            <div><span>geven</span> - <span>ik geef</span></div>
            <div><span>schreeuwen</span> - <span>ik schreeuw</span></div>
            <div><span>blozen</span> - <span>ik bloos</span></div>
        </div>
    </div>
</section>

Align strings over a common character

Based on the information you provided, this may work:

lst = [
'1 + 2 = 3',
'2*6 + 13 = 25',
'2*6 = 12',
'2 = 12 - 10'
]

mxleft = max([e.index('=') for e in lst])

l2 = [e.split('=')[0].rjust(mxleft) + '=' + e.split('=')[1] for e in lst]

print('\n'.join(l2))

Output

   1 + 2 = 3
2*6 + 13 = 25
     2*6 = 12
       2 = 12 - 10

How to vertically align all text in CSS?

Here is my solution using JS. The idea is to transform the element into an image in order to get its data as pixel then loop through them to find the top and bottom of each character and apply a translation to fix the alignment. This will work with dynamic font properties.

The code is not optimized but it highlight the main idea:

var elems = document.querySelectorAll(".avatar");
var fixes = [];

for (var i = 0; i < elems.length; i++) {  var current = elems[i];  domtoimage.toPixelData(current)    .then(function(im) {      /* Search for the top limit */      var t = 0;      for (var y = 0; y < current.scrollHeight; ++y) {        for (var x = 0; x < current.scrollWidth; ++x) {          var j = (4 * y * current.scrollHeight) + (4 * x);          if (im[j] == 255 && im[j + 1] == 255 && im[j + 2] == 255) {            t = y;            break;          }        }      }      /* Search the bottom limit*/      var b = 0;      for (var y = (current.scrollHeight - 1); y >= 0; --y) {        for (var x = (current.scrollWidth - 1); x >= 0; --x) {          var j = (4 * y * current.scrollHeight) + (4 * x);          if (im[j] == 255 && im[j + 1] == 255 && im[j + 2] == 255) {            b = current.scrollHeight - y;            break;          }        }      }      /* get the difference and apply a translation*/      var diff = (b - t)/2;      fixes.push(diff);      /* we apply the translation when all are calculated*/      if(fixes.length == elems.length) {        for (var k = 0; k < elems.length; k++) {          elems[k].querySelector('.character').style.transform = "translateY(" + fixes[k] + "px)";        }      }    });}

.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>

how to align text to specific character in phpstorm or webstorm?

Cmd+Alt+L (in Mac) or Ctrl+Alt+L (Win) and PHP Storm will format code depends of your Code style in Settings. TO set this code style go:
File -> Settings -> Code style -> PHP(choose here your language) -> Other -> Align key-value pair - mark as checked. And then press Reformat code (Ctrl+Alt+L) and voila. You will get code, styled you write above.

Aligning a character to the top of adjacent letters

Ugly, but you could use table cells.

First define some styles:

.bigletter
{
  font-size:20px;
  line-height:20px;
}
.upletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:top;
}
.downletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:bottom;
}

Then the html:

<tr>
  <td class='bigletter'>M</td>
  <td class='upletter'>C</td>
  <td class='bigletter'>P</td>
  <td class='downletter'>hexxx</td>
</tr>

CSS/Javascript to align a word on a specific character

The simplest way is to use a two-column table, where each row contains one line of the text and the second cell starts with the desired character, which is wrapped in a text-level container. Then you just style that container and right-align the first column. Example:

<style>
.aw { border-collapse: collapse; } /* remove cell spacing */
.aw td { padding: 0; }             /* remove cell padding */
.aw td:first-child { text-align: right; }
.aw b { font-weight: bold; color: red; }
</style>
<table class=aw>
<tr><td>stac<td><b>k</b>
<tr><td>ov<td><b>e</b>rflow
<tr><td>s<td><b>t</b>ack
<tr><td>over<td><b>f</b>low
</table>

You can dispense with the text-level containers ('b' elements in the example) if you use the :first-letter pseudo-element. But that pseudo-element does not work consistently if the first character in the element is not literally a letter but e.g. a punctuation mark or a digit.

Make specific character (or class/ID) be the center point of a string

This could be done with some jQuery:

var width = $('#text').width()/2;
var width2 = $('#center').width()/2;
var left = $('#center').offset().left;
$('#text').css('margin-right', (left-width+width2)*2);

https://jsfiddle.net/6w5Lb6ta/7/

---

Related Topics