p5.js textDescent() Function

The textDescent() function in p5.js is used to find out the descent of the current font at its current size. The descent can be defined as the distance of the longest descender character below the baseline, in pixels.

Syntax:

textDescent()

Parameters: This function has no parameters.

Return Value: It returns a number that denotes the descent in pixels.

The example below illustrates the textDescent() function in p5.js:

Example 1: This example shows the text descent using the default font.

let inputElem;
let currfontSize = 28;
let fontBaseline = 150;

function setup() {
  createCanvas(600, 300);

  // Create button to increase font size
  let fontBtn = createButton("Increase Font Size");
  fontBtn.mouseClicked(() => {
    currfontSize += 1;
  });
  fontBtn.position(20, 70);

  // Create input box
  inputElem = createInput("");
  inputElem.position(20, 40);
}

function draw() {
  clear();
  textSize(18);
  text("Write in input to change the text and observe text descent", 10, 20);
  textSize(currfontSize);

  // This value depends on the font used
  let fontScalar = 0.8;

  // Display text and line if input not empty
  let enteredText = inputElem.value();
  if (enteredText != "") {
    text(enteredText, 20, fontBaseline);

    // Draw the Base line
    stroke("black");
    line(0, fontBaseline, width, fontBaseline);

    // Draw the Descent Line
    stroke("green");
    descVal = textDescent() * fontScalar;
    line(0, fontBaseline + descVal, width, fontBaseline + descVal);
    noStroke();

    textSize(18);
    text("Text Descent Value: " + descVal, 20, 275);
  }
}

Output:

Example 2: This example shows the text descent using a custom font.

let inputElem;
let currfontSize = 28;
let fontBaseline = 150;
let newFont;

function preload() {
  newFont = loadFont("fonts/Montserrat.otf");
}

function setup() {
  createCanvas(600, 300);

  textFont(newFont);

  // Create button to increase font size
  let fontBtn = createButton("Increase Font Size");
  fontBtn.mouseClicked(() => {
    currfontSize += 1;
  });
  fontBtn.position(20, 70);

  // Create input box
  inputElem = createInput("");
  inputElem.position(20, 40);
}

function draw() {
  clear();
  textSize(18);
  text("Write in input to change the text and observe text descent", 10, 20);
  textSize(currfontSize);

  // This value depends on the font used
  let fontScalar = 0.8;

  // Display text and line if input not empty
  let enteredText = inputElem.value();
  if (enteredText != "") {
    text(enteredText, 20, fontBaseline);

    // Sraw the Base line
    stroke("black");
    line(0, fontBaseline, width, fontBaseline);

    // Draw the Descent Line
    stroke("green");
    descVal = textDescent() * fontScalar;
    line(0, fontBaseline + descVal, width, fontBaseline + descVal);
    noStroke();

    textSize(18);
    text("Text Descent Value: " + descVal, 20, 275);
  }
}

Output:

Online editor: https://editor.p5js.org/

Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

Reference: https://p5js.org/reference/#/p5/textDescent