p5.js textDescent() Function

Last Updated : 23 Aug, 2023

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:

textDescent-defaultFont

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); 
  } 
} 