Certain letters overflowing their container - can anything be done? - css

Question

I have noticed the problem of certain letters overflowing their container on the left side, but I haven't seen anyone actually bringing up the problem.
I've tried between a few different font-families, but they all seem to have the same problem.
JSFIDDLE: https://jsfiddle.net/3h5poynt/
HTML (angular)
<div class="personal-profile container-column">
<mat-card class="header">
<section class="cover-section"></section>
<section class="intro-section">
<div class="intro-header">
<div class="profile-photo-wrapper">
<img src="/assets/img/profile-picture-placeholder.png" alt="" class="profile-photo" />
</div>
<div class="badges-container">
<ul class="badges-list">
<li>
<img
src="/assets/badges/business-plans-180x180.png"
alt="Business plan"
matTooltip="Something"
matTooltipClass="badge-tooltip"
matTooltipPosition="above"
/>
</li>
<li><img src="/assets/badges/calling-customers-180x180.png" alt="Calling customers" /></li>
<li><img src="/assets/badges/finance-180x180.png" alt="Finance" /></li>
<li>
<img src="/assets/badges/selling-to-customers-180x180.png" alt="Selling to customers" />
</li>
<li><img src="/assets/badges/social-media-180x180.png" alt="Social media" /></li>
</ul>
</div>
</div>
<div class="info-container">
<div class="personal-info">
<div class="name-text">{{ profile ? profile.name : '' }}</div>
<div class="description">{{ profile ? profile.personal_description : '' }}</div>
</div>
<div class="additional-info"></div>
</div>
</section>
</mat-card>
SCSS
#import '../../../variables';
.mat-card {
padding: 0;
overflow: hidden;
section {
padding: 20px;
}
}
.badge-tooltip {
background: #3f51b5;
color: white;
font-family: $font-open-sans;
}
.personal-profile {
margin-top: 50px;
.header {
min-height: 500px;
width: 100%;
.cover-section {
background: url('/assets/img/coverpicture.png') center/cover;
height: 225px;
}
.intro-section {
.intro-header {
size: auto;
.profile-photo-wrapper {
position: relative;
margin-top: -87px;
display: inline-block;
.profile-photo {
width: 150px;
height: 150px;
border: 4px solid white;
border-radius: 10px;
box-shadow: inset 0 1.5px 3px 0 rgba(0, 0, 0, 0.15), 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
background-color: #fff;
}
}
.badges-container {
vertical-align: middle;
display: inline-block;
margin-top: -87px;
.badges-list {
list-style: none;
li {
float: left;
padding: 0 10px 0 10px;
img {
width: 40px;
height: 40px;
}
}
}
}
}
.info-container {
padding-top: 15px;
display: grid;
grid-template-columns: 1fr 1fr;
font-family: $font-open-sans;
.personal-info,
.additional-info {
display: flex;
flex-direction: column;
}
.personal-info {
.name-text {
font-size: 1.3em;
}
}
}
}
}
}
Main SCSS
/* You can add global styles to this file, and also import other style files */
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
#import '_variables.scss';
* {
margin: 0;
padding: 0;
font-family: $font-open-sans;
}
html {
font-family: 'Roboto', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
background-color: #e9ebee;
}
.container-column {
display: flex;
flex-direction: column;
width: 80%;
margin: auto;
}
.container-row {
display: flex;
flex-direction: row;
width: 80%;
margin: auto;
}
Is there something very essential that I am missing, or is this something that has to be hacked?

Answer 1

Jonas,
Some fonts are "just like that".
You will find that (especially with some of the more amateurish free fonts available nowadays) that some fonts' descenders, ascenders, ornaments, etc just overlap the borders that we (programmers, readers) expect them to conform to.
If you really want to use a font like this in this specific context, then you have to program around the font's limitations.
In your fiddle, I merely added padding-left to the name-text style:
.name-text{
font-size: 1.3em;
font-family: "Open Sans", sans-serif;
background: red;
padding-left:15px; /* voila! */
}
Give it a try in the fiddle.
If the left bearing is radically different on initial characters across the font, then you maybe able to set up various styles with padding that changes according to the substring value of the first character. Sounds like a bit of a living hell to program that, but if you really want it, there you go.
Or you could just pick a different font.