Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add subscript with Text using FabricJS?
In this tutorial, we are going to learn how to add subscript with Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can also add subscripts by using the setSubscript method.
Syntax
setSubscript(start: Number, end: Number)
Parameters
start ? This parameter accepts a Number as value. The value given determines the starting point for subscript.
end ? This parameter accepts a Number as value. The value given determines the ending point for subscript.
Example 1: Default Appearance of Text Object
Let's see a code example to see how our text object looks when the setSubscript method is not used. In this case, no subscript will be present.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of the Text object</h2>
<p>You can see that no subscript is present</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a text object
var text = new fabric.Text("Add sample \ntext here.", {
width: 300,
left: 50,
top: 70,
fill: "green",
});
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
Example 2: Using setSubscript Method
In this example, we will see how by using the setSubscript method, we are able to turn certain characters into "inferior figures". Such characters would be present slightly below the baseline. In this example we have used the values as 0 and 4 which means the subscript will start at the 0th index and end at the 4th index.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using the setSubscript method with custom values</h2>
<p>You can see that subscript has been added to the text</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a text object
var text = new fabric.Text("Add sample \ntext here.", {
width: 300,
left: 50,
top: 70,
fill: "green",
});
// Using the setSubscript method
text.setSubscript(0, 4);
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
How It Works
The setSubscript method modifies the character formatting within the specified range. Characters from the start index to the end index (exclusive) are rendered as subscript text, appearing smaller and positioned below the baseline. This is particularly useful for mathematical formulas, chemical notations, or footnote references.
Key Points
The start parameter is inclusive, while the end parameter is exclusive
Character indices start from 0
Subscript text appears smaller and below the baseline
Multiple subscript ranges can be applied to the same text object
Conclusion
The setSubscript method in FabricJS provides an easy way to format specific portions of text as subscript. This feature is essential for creating mathematical expressions, chemical formulas, and various scientific notations on canvas.
321 Views
