CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Horai Nuri
Horai Nuri

Reputation: 5578

How to stick text to line on font resize?

There's a design issue I'd like to fix in my app, whenever some text is resized it doesn't stick to the same place. Either way the font moves up if its size gets smaller or down when the size is bigger. It doesn't stay in the same place, I'd like the origin to be on the bottom left of the font.

Here's a schema of what I want to achieve:

enter image description here

I've added a line in the snippet, the font should always be exactly on top of the line whenever font size changes (note that the line is just here to help, it is not here in my app).

p should stay on absolute position.

Try snippet to see the problem : 

$('.opt-minus').click(function() {
  var $input = $(this).parent().find('input');
  var count = parseInt($input.val()) - 1;
  count = count < 1 ? 1 : count;
  $input.val(count);
  $input.change();
  return false;
});

$('.opt-plus').click(function() {
  var $input = $(this).parent().find('input');
  $input.val(parseInt($input.val()) + 1);
  $input.change();
  return false;
});

$(document).on('change', '#tb-font-size', function() {
  var content = $(this).val();
  $('p').css({
    "font-size": content + 'px',
  })
});
.btn {
    line-height: 36px;
    float: left;
    cursor: pointer;
    background: white;
    color: #ecf0f1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    border: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    padding: 1px 15px;
    display: inline-block;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #eaeaea;
  }
  
  input {
    float: left;
    padding: 0 10px;
    width: 50px;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
    border: solid 1px #eaeaea;
    display: inline-block;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
  }
  
  .tb-opt-int {
    height: 40px;
    width: 158px;
    margin-left: auto;
    margin-right: auto;
  }
  p {
    position:absolute;
    top:10px;
    left:30px;
  }
  .absolute {
    position: absolute;
    left: 0px;
    width: 100%;
    border-bottom: 1px solid;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>How to make it scale from bottom left ?</h3>
<div class="tb-opt-int">
  <span class="opt-minus btn">-</span>
  <input id="tb-font-size" type="text" class="tb-select" name="tb-fonts-size" value="16">
  <span class="opt-plus btn">+</span>
</div>
<div style="position:relative;">
  <p>Scaling from <strong>top left</strong> cross origin</p>

  <span class="absolute" style="top: 40px;"></span>
</div>

Is there anyway to fix this issue with Javascript or CSS?

Upvotes: 2

Views: 67

Answers (1)

Jonathan
Jonathan

Reputation: 6537

Because you are using top, the top of the text will always be at the same place. You could use bottom instead.

Update: Based on the comments, you can modify the top with JavaScript at the same time you modify the font-size so that the top will move up with a larger font size and down with a smaller font.

$('.opt-minus').click(function() {
  var $input = $(this).parent().find('input');
  var count = parseInt($input.val()) - 1;
  count = count < 1 ? 1 : count;
  $input.val(count);
  $input.change();
  return false;
});

$('.opt-plus').click(function() {
  var $input = $(this).parent().find('input');
  $input.val(parseInt($input.val()) + 1);
  $input.change();
  return false;
});

$(document).on('change', '#tb-font-size', function() {
  var content = $(this).val();
  var current_top = $(".scaling-p").position().top;
  var bottom = current_top + $(".scaling-p").height();
  var height =  $(".scaling-p").height();
  $('p').css({
    "font-size": content + 'px',
  }).css({
    top: (current_top - ((current_top +  $(".scaling-p").height()) - bottom)) + 'px'
  })
});
.btn {
    line-height: 36px;
    float: left;
    cursor: pointer;
    background: white;
    color: #ecf0f1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    border: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    padding: 1px 15px;
    display: inline-block;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #eaeaea;
  }
  
  input {
    float: left;
    padding: 0 10px;
    width: 50px;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
    border: solid 1px #eaeaea;
    display: inline-block;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
  }
  
  .tb-opt-int {
    height: 40px;
    width: 158px;
    margin-left: auto;
    margin-right: auto;
  }
  p {
    position:absolute;
    top:22px;
    left:30px;
    margin:0;
    line-height: 1em;
  }
  .absolute {
    position: absolute;
    left: 0px;
    width: 100%;
    border-bottom: 1px solid;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>How to make it scale from bottom left ?</h3>
<div class="tb-opt-int">
  <span class="opt-minus btn">-</span>
  <input id="tb-font-size" type="text" class="tb-select" name="tb-fonts-size" value="16">
  <span class="opt-plus btn">+</span>
</div>
<div style="position:relative;">
  <p class="scaling-p">Scaling from <strong>top left</strong> cross origin</p>

  <span class="absolute" style="top: 40px;"></span>
</div>

Upvotes: 4

Related Questions