Displaying a Vertical Fraction with HTML in Adobe Animate -HTML Canvas

If you need to write content that contains fractions to display on the Canvas element on Adobe Animate CC, you might consider HTML with CSS. The Text class of CreateJS is very limited and does not even include subscripts or superscripts. With this text class, you can display fractions using the forward-slash, but not a vertical fraction.

What I call vertical fractions is a notation where the numerator appears above the denominator with a horizontal bar such as 3 5100 instead of 3 5/100. You can also use Javascript code to make HTML-text  interactive . Below I embedded a fraction in a text div element that contains other text which I placed inside the “animation_container” div that Adobe generates as a wrapper for the Canvas element. I added  3 event handlers to the span that contains the fraction for mouseover, mouseout, and click events. Try it out. Mouse over the fraction.
Here’s another version.
In the top version, I used 2vw for the text-size of the txtDiv that contains the text with the embedded fraction. 2vw is a per cent of the viewport. It scales based on the viewport, but it does not work inside a post in WordPress. I then uploaded a new version based on a fixed viewport. If you have other solutions, please let me know. click for a different version
If you mouse over the fraction above, you will trigger the styling handler that applies an orange color to the background of the span that contains the fraction. The click handler also applies some styling. Here’s the code that I used on the actions layer of the timeline. There’s only one frame to this project.

var mainTL = this;
mainTL.stop();
var animContainer = document.getElementById("animation_container");

//-----Creating the Div for the text that will contain the fraction

var tDiv = document.createElement("div");
animContainer.appendChild(tDiv);

var txt = "The purpose of this article is to embed a vertical \
fraction in this paragraph.For example x + 8 divided by 2x - 3 \
should not appear as (x + 8)/(2x - 3) but as <span id='fraction'>\
<span id='top'>x + 8</span><span id='bottom'>2x - 3</span></span>.\
The text continues here. This is done with HTML text, using the \
span element. See below for more details."

tDiv.innerHTML = txt;

//-----Stylying the text and the fraction with CSS------

var topN = document.getElementById('top');
var bottomN = document.getElementById('bottom');
var fraction =document.getElementById('fraction');
tDiv.style.cssText = `cursor: default;
                       position: absolute;
                       top:5%;
                       left:10%;
                       font-family:'Happy Monkey';
                       width: 70%;
                       font-size: 2vw;
                       color: black;
                       text-align: left;`
   fraction.style.cssText =` //this is a span
                        text-align: center;
                        font-size: 60%;
                        font-weight:bold;
                        cursor: pointer;
                        display: inline-block;
                        vertical-align: sub;`
   topN.style.cssText =`display: block;`//this is a span
   bottomN.style.cssText = ` //this is a span
                        display: block;
                        border-top: 1.5px solid black`; //fraction                                                             bar

//-------------Adding Listeners to the fraction------------------

//------MouseOver--------
    fraction.addEventListener("mouseover", MOverHandler);
function MOverHandler(){
    fraction.style.cssText = `background-color: orange;
                              text-align: center;
                              font-size: 60%;
                              font-weight:bold;
                              cursor: pointer;
                              display: inline-block;
                              vertical-align: -25%;`
    fraction.addEventListener("mouseout", MOutHandler);
}
//--------MouseOut-------
function MOutHandler(){
         fraction.style.cssText = `
                         cursor: default;
                         background-color: none;
                         text-align: center;
                         font-size: 60%;
                         font-weight:bold;
                         cursor: pointer;
                         display: inline-block;
                         vertical-align: -25%;`
      bottomN.style.cssText = `
                         border-top: 1.5px solid black;`
}
//------Click-------
fraction.addEventListener("click", clickHandler);
function clickHandler() {
     fraction.style.cssText =`color: blue;
                         text-align: center;
                         font-size: 70%;
                         border: 1.5px solid black;
                         cursor: pointer;
                         display: inline-block;
                         vertical-align: -25%;`
      bottomN.style.cssText = `
                      border-top: 1.5px solid blue;`}

Leave a Reply