How can i display fraction numbers using EaselJS

Question

Please someone suggest me the styling / displaying the fraction numbers in js(Specially Easeljs) without using the html/css,

Normal Style:

Required Style:

How diverse do your fractions need to be? if you only need basic ones, then there are many html special characters to do that http://brucejohnson.ca/SpecialCharacters.html#fractions all you need to do is convert decimal point version into the special character via lookup table in a object — Andrew Killen, Nov 17 '16 at 07:25
Welcome to SO. Please visit the [help] to see what and how to ask. HINT: Post effort and code — mplungjan, Nov 17 '16 at 07:30

score 2 · Answer 1 · edited Nov 17 '16 at 07:30

You can check this, maybe it helps you, it gives the desired number the class fraction

$('.fraction').each(function(key, value) {
    $this = $(this)
    var split = $this.html().split("/")
    if( split.length == 2 ){
        $this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>')
    }    
});

.fraction, .top, .bottom {
    padding: 0 5px;    
}

.fraction {
    display: inline-block;
    text-align: center;    
}

.bottom{
    border-top: 1px solid #000;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="fraction">1/2</span>
<span class="fraction">3/4</span>
<span class="fraction">1/32</span>
<span class="fraction">77/102</span>

Thanks for the response, whether it can be done without using the html and css? — Mamallan, Nov 17 '16 at 08:16

score 1 · Answer 2 · answered Nov 17 '16 at 07:42

1

This is the closest I could think of. https://jsfiddle.net/t1tzu2ke/

Hope this helps. '

21 - 2

<style type='text/stylesheet'>
p{
font-size:3em;
}
span{
  width:10px;
  display:inline-block;
  font-size:.3em;
  padding-left:5px;
  line-height:.8em;
}
</style>

`

answered Nov 17 '16 at 07:42

realtymarker

77
1
7

Whether it can be done without using the html and css? – Mamallan Nov 17 '16 at 08:17
What do you mean? – realtymarker Nov 17 '16 at 09:03
Only through js without using css/html – Mamallan Nov 17 '16 at 09:35
Not sure if this is what you want. You can convert all the above to js. – realtymarker Nov 23 '16 at 06:34

Mamallan · Answer 3 · 2016-11-30T05:24:40.960

I have found a way to display the numbers like fraction numbers using the Easeljs without using the html/css

var canvas = document.getElementById("canvas");
    var stage = new createjs.Stage(canvas);


    var Container = new createjs.Container();
    Container.x = 50;
    Container.y = 50;
    var number = new createjs.Text(2, "Bold 24px Arial", "#494949");
    number.textAlign = "left";
    number.x = -15;
    number.y = -5;
    var top = new createjs.Text(1, "Bold 13px Arial", "#494949");
    top.x = 0;
    top.y = -7;
    var middle = new createjs.Text("-", "Bold 13px Arial", "#494949");
    middle.scaleX = 2;
    middle.x = 0;
    middle.y = 0;
    var bottom = new createjs.Text(2, "Bold 13px Arial", "#494949");
    bottom.x = 0;
    bottom.y = 10;
    var frCont = new createjs.Container();
    frCont.addChild(top, middle, bottom);

    Container.addChild(number, frCont);
    stage.addChild(Container);
    stage.update();


<canvas id="canvas" class="no-select" width="600" height="150"></canvas>

https://jsfiddle.net/73h2sf6t/

score 0 · Answer 4 · answered Nov 17 '16 at 22:25

Styling like this in EaselJS is going to be challenging, because you can not really style text in canvas without creating a ton of extra pieces and positioning them manually.

Your best bet is to use one of the suggestions in this thread (using html/css), and wrap it in an EaselJS DOMElement.

var div = document.getElementById("myCustomControl");
var elem = new createjs.DOMElement(div);
stage.addChild(elem);

elem.x = 100;
elem.y = 200;
elem.scaleX = 2;
elem.rotation = 90;

The DOMElement wraps any HTML element (div, p, span, etc), and transforms it relative to the EaselJS stage. You can not layer this content within other EaselJS content (it has to be on top or underneath everything), but you can at least position it. DOMElement also has other limitations, like no support for filters and caching.

This is a recommended approach any time you want more complex formatting of text, since Canvas text is so limited.

How can i display fraction numbers using EaselJS

4 Answers4