Cyclist Cyclist - 4 months ago 13
HTML Question

Numbers Not on Same Line

I'm new to SVG and have been putting numbers in text tags for a week or two with no issues. It seemed straightforward. Now, strangely, I'm having an issue in which, no matter what numbers I put in, there is a dip in the second number.

Here is a pic to show you what is happening. The number "63" is supposed to be all on the same plane with itself, though a bit below the "This Week" designation. Instead, the '3' is dipping down lower. Pic of my problem.

My code:

<div class = "chartbox">

<div class = "svgcontainer" >

<svg class = "chart" width="590" height="440" role="img">
<g class = "bigbox">


<text x="346" y = "35" class = "blurbhed">This Week </text>
<text x ="491" y ="44" class = "blurbdeck"><?php echo round($kms_for_table[0]);?></text><text x ="540" y ="48" class = "blurbkm"><?php echo "km";?></text>

</g>
</svg>
</div>
</div>


The CSS:

body { background-color: #1C1816;

font-family: Raleway, Gotham-Rounded, Arial , sans-serif;}


.blurbhed {
font-size: 1.5em;
font-weight: 600;
fill: #650a5d;
letter-spacing: .3px;


}

.blurbdeck {
font-size: 2.7em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;

}

.blurbkm {
font-size: 1.3em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;

}
.svgcontainer {
display: block;
position: relative;
border: 10px solid purple;
background-color: lightyellow;
margin-left: 10px;
height: 453px;
width: 630px;
margin-top: 0px;
margin-bottom: 20px;
text-align: center;
margin-right: 50px;

}

.chartbox {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
width: 800px;
margin-bottom: 10px;
padding-top: 20px;
}


The same problem happens wherever I move the text around the svg element. It occurs with a variety of fonts, and with different numbers. It happens whether I just have it echo the number or have it generated by the code from my model. I also tried making a completely new text element in a different spot, and the same weird dip in the second number occurs.

I'm sure this is really simple, but I've been fiddling with it far too long and am hoping someone can help me out. Thank you!

Answer

This is definitely down to the design of the font being used.."Raleway".

enter image description here

h1 {
  font-family: 'Raleway', sans-serif;
  font-size: 72px;
  text-align: center;
}
h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 72px;
  text-align: center;
}

* {
  margin:0;
  }
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<h1>0123456789</h1>


<h2>0123456789</h2>

I can only suggest using a different font..but you'd have to test each for the right look.