Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added fontAscent Docs #7606

Draft
wants to merge 1 commit into
base: dev-2.0
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 71 additions & 1 deletion src/type/textCore.js
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,77 @@ function textCore(p5, fn) {
};

/**
* @returns - returns the descent for the current font
* Returns the typographic ascent of the currently active font in pixels.
*
* @private
* @return {number} returns the descent for the current font
*
* This function automatically detects the active font and calculates its
* ascent, which is the maximum vertical distance between the baseline and
* the highest glyph in the font's design metrics. This measurement is
* intrinsic to the font itself and remains consistent regardless of specific
* character combinations.
*
* @method fontDescent
*
* @example
* <div modernizr='canvas'>
* <code>
* function setup() {
* createCanvas(300, 200);
* background(200);
* textFont('Courier New');
* textSize(20);
* text('Hello World!', 35, 55);
* const ascent = fontAscent();
* text(`Ascent-value: ${ascent.toFixed(1)}px`, 20, 120);
* }
* </code>
* </div>
*
* In the example below, you can see how to visualize the font ascent:
* - A red line represents the text baseline.
* - A green line is drawn at a distance equal to the ascent above the baseline.
* - The text is rendered using the specified font, and the calculated ascent value is displayed.
*
* <div modernizr='canvas'>
* <code>
* function setup() {
* createCanvas(300, 200);
* textSize(20);
* textFont('Courier New');
* noLoop();
* }
*
* function draw() {
* background(255);
* const yBase = 50; // Baseline Y position
*
* // Get font metrics
* const ascent = fontAscent();
* const txt = 'Hello p5.js';
*
* // Draw baseline (red line)
* stroke(255, 0, 0);
* line(0, yBase, width, yBase);
*
* // Draw ascent line (green line)
* stroke(0, 255, 0);
* line(0, yBase - ascent, width, yBase - ascent);
*
* // Draw text
* noStroke();
* fill(0);
* textAlign(LEFT, BASELINE);
* text(txt, 50, yBase);
*
* // Display the ascent metric
* fill(0);
* text(`Ascent-value: ${ascent.toFixed(1)}px`, 20, 120);
* }
* </code>
* </div>
*
*/
Renderer.prototype.fontDescent = function () {
return this.textDrawingContext().measureText('_').fontBoundingBoxDescent;
Expand Down