How to fix CSS problem with letter-spacing and right-aligned text?

Navigation
4

I have a situation in which I have a container with two lines of text in right-aligned. Only one of the lines has the letter-spacing: 15px; property to increase the spacing between the characters.

The problem is that letter-spacing increases space only to the right, so the text is not correctly aligned on the right, leaving an empty space on the right between the end of the text and the container.

I know that putting a margin-right negative on the same value as letter-spacing I fixed this. But I have text of various sizes with letter-spacing of various sizes and I do not want to always have to repeat a margin-right for every letter different.

Is there any way to automate this without always having to repeat the negative value in margin-right ?

Is there any way to use CSS Variables to automate this? Type if my letter-spacing is X how to automatically pass this value to my margin-right ? 

p + p {
    letter-spacing: 15px;
}
p {
  color: orangered;
  text-align: right;
  font-size: 30px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
}
.box {
  width: 500px;
  border: 1px solid;
}
<div class="box">
  <p>Titlem</p>
  <p>taglinem</p>
</div>
    
asked by anonymous 19.11.2018 / 13:24

1 answer

2

If you declare the value as a variable and use the calc function, to invert it in margin-right , you can get around the problem. 

p + p {
    --espaco : 15px;
    letter-spacing: var(--espaco);
    margin-right: calc(var(--espaco) * -1);
}
p {
  color: orangered;
  text-align: right;
  font-size: 30px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
}
.box {
  width: 500px;
  border: 1px solid;
}
<div class="box">
  <p>Titlem</p>
  <p>taglinem</p>  
</div>
    
19.11.2018 / 16:30
What are the criteria for failbit and badbit in a std :: istream? Format Array display in C #?