Resize property for text in html

Question

How to resize text inside a div by the user in front end .

for div resizing in the front by the user we can use css like

div {
    resize: both;
    overflow: auto;
}

or using jquery

$( "#div-id" ).resizable();

To edit text in a div in the front we can use

<div id="div-id"  contenteditable="true"> Type text</div>

But how to make the resizable text inside a div .

EXAMPLE:

User can change the text inside this div <div id="div-id" contenteditable="true"> Type text</div> , but how user can increase the text size in that div ?.

Note : actually this font size able to change by user . Currently the user can edit the text . In the same way user able to do increase the font size

Thank you

You would need to use js to change the class of the div or change the font-style - `$( "#div-id" ).css('font-size', '150%')` — Pete, Oct 18 '16 at 12:33
Are you looking for some kind of richtext editor? https://www.google.co.uk/search?q=richtext%20editor — freedomn-m, Oct 18 '16 at 12:36
check out viewport percentage http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Woncker, Oct 18 '16 at 12:38
@Pete actually this font size able to change by user . Currently the user can edit the text . In the same way user able to do increase the font size . — , Oct 18 '16 at 12:42
@Woncker Hi, it's not about viewport width or automatic scaling — , Oct 18 '16 at 12:45
@Ron only if you build a custom control - the only other way to resize your text is to zoom the browser in and out. There is no native controls for resizing text — Pete, Oct 18 '16 at 12:54

score 2 · Accepted Answer · answered Oct 18 '16 at 12:54

2

You can grab on resize event

$( function() {
  var basefont = 14;
  var scale = 1;
  var width = $( "#div-id" ).width();
  $( "#div-id" ).resizable();
  $( "#div-id" ).on('resize', function() {
    scale = $(this).width() / width;
    $( "#div-id" ).css('font-size', scale*basefont);
  }); });

Example:

https://jsfiddle.net/e3q3zrrk/1/

answered Oct 18 '16 at 12:54

Jarek

184
3

Thank you friend . this is the same way i need . I don't know why people down vote this question – Oct 18 '16 at 13:00
Is it possible to make the width and height of the div according to the text in it ? – Oct 18 '16 at 13:02
@Ron Obviously yes. Something like `var relativeWidth = $(".mytext").css("font-size"); $("#mydiv").width(relativeWidth);` – user31782 Oct 18 '16 at 13:12
so that user can feel like they are increasing the font size . not by increasing div size . – Oct 18 '16 at 13:12

CMartins · Answer 2 · 2016-10-18T13:02:10.447

0

You can use an increasing / Decreasing variable for the size and some jQuery Font attributes.

<a href="#"><p class="myclass">test</p></a>


mySize = 12;
$(this).click(function ()
              {
                mySize = mySize + 2;
                $(".myclass").css("font-size", mySize + "px" );
                console.log(mySize);

});

edited Oct 18 '16 at 13:02

answered Oct 18 '16 at 12:42

CMartins

3,247
5
38
53

thank you . I will check this . Could you please give an demo . – Oct 18 '16 at 12:51
1

I guess you should be using `$(".myText").css()` method not `$(".myText").attr()` method. – user31782 Oct 18 '16 at 13:01
Absolutely right. I've made some corrections @user31782 – CMartins Oct 18 '16 at 13:03
Thank you @CarlosMartins . :) – Oct 18 '16 at 13:05

score 0 · Answer 3 · answered Oct 18 '16 at 12:46

0

I second Carlos's suggestion. You could first define how the mysize should change when resizing the div like this:

var multiplicate = 0.7
var mySize = multiplicate*$( "#div-id" ).width();  
 $(".myText").css( "font-size", mySize + "px");

answered Oct 18 '16 at 12:46

user31782

7,087
14
68
143

2

Thank you . I will check . – Oct 18 '16 at 12:51
@Ron Also you will have to put my code in `resize` event. I am not sure jquery resize event works on everything just like on window. Otherwise you could use `setTimeout` or `onmousemove` etc events to execute the code every time div's dimensions chage. – user31782 Oct 18 '16 at 13:09
Friend i didn't understand . what modification need to do in @jaerk answer ? – Oct 18 '16 at 13:14
@ron jaerk's answer is fine. I didn't read that while writing the comment. – user31782 Oct 18 '16 at 13:15
ok. Could you please check this ? according to your comment i add this code var relativeWidth = $("#div-id").css("font-size"); $("#div-id").width(relativeWidth); into $( "#div-id" ).on('resize', function() {} . and change the css of #div-id . but it's not working . – Oct 18 '16 at 13:19
I think `$("#div-id").css("font-size")` will in pixels that is like `12px`. You would have to change "12px" string to numeric with `parseInt("mystring")`. Also this will not work with `resize` event because we are now changing the font-size. Perhaps `change` event will work f you are using an `input` field. – user31782 Oct 18 '16 at 14:16

Resize property for text in html

3 Answers3