Can CSS be used to show text at a descent rather than baseline?

Is there a correct method to position text at the descent height of a line rather than its baseline?

For more information, please visit:

http://en.wikipedia.org/wiki/Baseline_(typography)

and

http://jsfiddle.net/YPPnU/

The objective is to align the bottom of my text (as shown in the fiddle) with the bottom of the H1 block without relying on images.

I understand that the alignment is achieved by using characters with descenders like 'p' and 'q', but I need characters without descenders to align flush with the H1 block's bottom.

I have attempted different adjustments involving positioning and negative margins, but encountered two issues: 1) it affects the height of the h1 element. 2) the amount of negative bottom margin needed may vary based on the font used. Is there a "proper" way to accomplish this?

edit Please check comments for updates....

The most effective technique can be found here: http://jsfiddle.net/YPPnU/23/

However, I would prefer not to rely on estimations for line-height.

Another option could be to use a webfont where all characters are aligned at the descent instead of the baseline, but I have been unable to locate such a font through Google. Does anyone know if one exists?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on using Xpath to compare content between two tags

I am facing the following scenarios with $html contents. I am trying to determine if the html content starts with a media element (such as an image, video, or iframe) without any text content, similar to the third scenario below. //no contetn between firs ...

Colorful radial spinner bar

I am interested in replicating the effect seen in this video: My goal is to create a spinner with text in the center that changes color, and when the color bar reaches 100%, trigger a specific event. I believe using a plugin would make this task simpler, ...

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

I am attempting to construct a hierarchical expand/collapse list that illustrates a parent-child relationship. Initially, the parent nodes will be displayed. If they have children, a carat icon is shown; otherwise, a bullet icon appears. When the carat ico ...

Exploring the ID search feature in JavaScript

I'm facing an issue with implementing a search feature in my project. Here is the HTML snippet: HTML: <input type="text" id="search"> <video src="smth.mp4" id="firstvid"> <video src="smth2.m ...

What is the best way to utilize a variable declared in a JavaScript file within an HTML document?

Here is the content of my JavaScript file: var moment = require("moment") var structuredDate = moment(Date()).format("LLLL") I am trying to dynamically update a <div> element in my HTML with the date value. This is what I attem ...

What are some effective ways to manage repetitive HTML elements like headers and footers in Angular 4?

Within my Angular web project, I find myself using a variety of different headers on multiple pages. Is there a way to streamline this process by coding the header and footer once and having them automatically included in one or more pages? I am looking ...

What are some ways I can ensure my divs are fully responsive on all devices

Why are my three transparent divs in the center of the page not functioning properly when resizing the screen to md, sm, and xs? The one on the left is offset to the left. How can I make them adaptive? They are meant to be centered next to each other, but ...

Is there a way to get this script running on WordPress?

I'm working with this JavaScript code: $(document).ready(function(){ $("text1").click(function(){ $(this).hide(); }); }); Here's the HTML code: <div class="div1"> <p class="text1">text to appear when the user p ...

Understanding how to incorporate a URL parameter using HTML and Javascript

I have a web application section where users can search for locations on a map successfully. However, I'd like the text of the location to be displayed in the URL so that users can easily copy and share it for consistent searches. What is the most ef ...

Differentiating the background color of the active tab in Bootstrap while keeping other active classes unaffected

I am currently working with Bootstrap and have created a list as shown below: https://i.sstatic.net/PqBip.png The active state of this list item is blue, but I would like to change it to green or another color. Here is the code snippet: <a class="l ...

Effortlessly retrieving the id attribute from an HTML tag using jQuery

Currently, I am encountering an issue with a code snippet that is designed to extract the value from an HTML tag. While it successfully retrieves a single word like 'desk', it fails when attempting to do so for an ID consisting of two or more wor ...

Styling in CSS is being applied to a button element within a React component,

Having trouble with a button styled with the className 'actions' The button displays the CSS styling from '.actions', but not '.actions button'. Both should be applied. This code snippet works for all elements ...

What is the best way to implement a toggle feature for a single image within a div element that contains multiple images when clicked?

I am facing an issue where I have multiple images stacked on top of each other. When one of the images is clicked, I want a toggle function to activate that changes the opacity of the top image to 0, revealing the image underneath. However, every time I cl ...

Changing the font-family on the dropdown menu provided by Codrops seems to be difficult

Looking for help with the Tympanus Codrops Dropdown Menu - SimpleDropDownEffects. I'm having trouble changing the font-family on my website. I am using Icomoon for the icons, and while that works fine, I can't seem to properly format the text ho ...

How can I stop horizontal scrolling in React Native Android WebView?

I'm encountering an issue with webview and scrolling on different devices. I have managed to disable scrolling using the scrollEnabled property for IOS, but unfortunately, this does not work for Android. Despite trying various scripts, none of them se ...

What is the most effective method for creating a central file containing multiple subdomain pages?

I am working with a file named master.php, containing a code snippet that retrieves the city and state from the subdomain and inserts it into the body. $url = "//$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $parsedUrl = parse_url($url); $host = explode(&apo ...

Submitting a form using JQuery triggers an error message related to character encoding

While attempting to submit a form using jQuery, I encountered an issue. Firebug displayed a strange error message in German, leading me to believe that there may be a peculiar character in the HTML causing the problem. The character encoding of the plai ...

What is the best way to strip the text from a link that encompasses both text and an image using jquery?

I have a website with a list of items. Each item in the list has a link that includes both text and an image. Here is an example of the HTML structure: <li class="li-one" style=""> <a href="#" onclick="return ...

"Troubleshooting cross-domain issues with iframes in Internet Explorer

My application is built with angularjs and we offer the option to embed it on other websites. Everything works well in IE11, but when the application is iframed onto a different domain's website, it stops working. I've tried adding <meta htt ...

Website undergoes phone number update

Is there an efficient method to update a phone number universally across multiple pages on a website? For instance, if I have the same phone number displayed on 3 different pages and need to change it, is there a way to create a variable to easily make th ...