Having applied CSS to a span element:
font-height = 120px;
height = 120px;
line-height = 120px;
The text inside the span does not completely fill the height of 120px. Is there a method to determine the offset of the text from the top and bottom boundaries?
Alternatively, is there a technique to have the text touch both the upper and lower edges of the enclosing span tag?
Here is the jsFiddle link for more information.
Here is a way to achieve this visually without relying on javascript:
#abc {
margin: none;
border: dotted 1px red;
padding: 0;
height: 120px;
font-size:180px;
line-height:120px;
display:inline-block;
}
To ensure it works properly, make sure to use display:inline-block; and adjust the font size based on your chosen font.
Make sure to consider all characters, not just those that fit perfectly within the span height of 120px. Characters like "j" or "Á" might not display correctly if you do not account for their size.
Here is an example of how you can adjust your HTML:
<span id="abc">jÁ / ABC</span>
and also update your CSS accordingly:
#abc {
margin: none;
border: dotted 1px red;
padding: 0;
display:inline-block;
/*****120px*****/
height: 120px;
font-size:120px;
line-height:120px;
}
You can test this out here: http://jsfiddle.net/jTpfT/17/
UPDATE
I have created a script that automatically adjusts the font size based on the ratio between the total height of the font-family and the uppercase letter size.
Feel free to check out the script here: http://jsfiddle.net/jTpfT/32/
JS:
/**
* Calculate the ratios by hand and store in this variable form:
* myfontlowercase + _upper_case_ratio
*/
var georgia_upper_case_ratio = 1.44
var arial_upper_case_ratio = 1.32
var times_upper_case_ratio = 1.48
/********************************************/
$(document).ready(function() {
$(".fitTextHeight").each(function(){
//Get font family
var ff = $(this).css('font-family').toLowerCase().split('\'').join('').split(' ').join('');
//get ratio
var miRatio = 1;
try {miRatio = eval(ff+ "_upper_case_ra`tio`); } catch (e) { }
//Get boxSize
var boxSize = Number ($(this).css('height').split('px')[0]);
//Calculate newSize & apply
var newCssFontSize = boxSize * miRatio
$(this).css('font-size', newCssFontSize );
$(this).css('line-height', boxSize + "px" );
})
});
According to the browser, the gap visible in the jsFiddle link is actually a part of the font itself. For example, inserting a lower case g into the text would make the bottom gap disappear and align the span with the rest of the text.
Unfortunately, there is no automatic way for browsers to resize the text to remove this gap since they are unaware of the specific threshold. This means that manual adjustment through trial and error would be necessary, but this method may not work consistently across different browsers.
The most feasible solution to address this issue and eliminate the gap would involve using an image instead of text.
If you prefer not to create the image using software like Photoshop, another option is to generate the image dynamically on the front end using canvas or on the back end with a library such as GD in PHP. By generating the image dynamically, you can easily edit the pixel data to remove any whitespace around the text.
Additionally, utilizing a font replacement technology like cufon or typeface.js could potentially provide text without the gap by making some minor adjustments.
To achieve this effect, adjust the line-height in relation to the font-size. Then, implement display:inline-block. Keep in mind that adjustments may be necessary depending on the specific fonts being used. One method for controlling these variations is utilizing text-transform:uppercase.
See below for the code snippet:
#abc {
font-size: 100px;
line-height: 68.5%;
border: dotted 1px red;
text-transform:uppercase;
display:inline-block;
}
You have the flexibility to customize the font size as desired and it will still function properly. If switching to a different font, simply update the relative percentages within the line-height.
Check out this code snippet: function User(fullName) { this.fullName = fullName; Object.defineProperties(this, { firstName: { get: function () { return fullName.split(" ")[0]; ...
const UserJwt = (props) => { const { jwt } = props; const [jwtToken, setJwtToken] = useState(null); useEffect(() => { if (jwt) { setAuthToken(jwt); setJwtToken(jwt); } }, [jwt]); return <MobilePurchaseScreen {...pro ...
Struggling to pass parameters between two different ajax calls, I've noticed that the params only exist within the ajax scope and not outside of it. Is there another way to achieve this without calling from one ajax success section to another ajax? He ...
Currently, I am working on a layout design using Bootstrap 3 that involves eight text divs. These divs have almost the same height, but some are slightly taller depending on the screen width. My goal is to arrange them into three columns on desktop and th ...
I've developed a socket.io web app. When I click on the button to send a message, the message appears briefly but disappears when the page refreshes unexpectedly. How can I prevent this random refreshing and ensure that socket.io saves my messages? B ...
How can I limit the display of a Twitter widget on my blog page to only show on the main page and hide it when visitors navigate to sub-pages or individual blog entries? ...
In an effort to name a dynamically created textbox based on a specific event, I attempted the following code. The function GenerateTextBox was intended to assign a name and value of "" to the textbox upon generation, however, the name did not get assigned ...
A tutorial on webpack configuration for typescript typically demonstrates the following: const path = require('path'); module.exports = { ... } Is it more advantageous to utilize ES modules and configure it with import statements instead? Or is ...
I have encountered an issue with a dynamically generated login form. When I select the 'Forgot Password' option, a new 'Back to Login' message appears along with a separating '|' line. Removing this line is proving challenging ...
Is there a way to initiate an action from a main component when the child component's state reaches a specific value? Let's consider a scenario where I have a Parent component and a Child component, with the parent's state containing active ...
I am facing an issue with mocking the promises methods of the node fs module in my code. When my appData.ts file is executed, it calls the actual fs.promises.mkdir method instead of the mock function defined in \__tests__/appData.test.js. I suspect ...
When using disableElements in the setQuickBarPanelContents() function, I am able to remove 2 of the 3 panels from the leftPanel: setQuickBarPanelContents() { this.instance.disableElements(['notesPanel', 'notesPanelButton', &apos ...
I am currently going through a codelab tutorial on Bitbucket at this link After installing node.js for the first time, I encountered an error when trying to run the server.js file: node server.js The error message "node: Command not found" appeared even ...
Hey there! I have a challenge where I need to calculate the sum of input values for each cell and display it dynamically in the last cell of the row. Take a look at the image below: https://i.stack.imgur.com/0iKEE.png In the image, you can see that the nu ...
Check out the JSFiddle here I've created a full-width CSS menu that spans the entire screen, but I'm struggling to figure out how to make the corresponding subnav items appear below their parent items. Is it even possible to achieve this design ...
Take a look at this array and its corresponding expected output: In Javascript, is it possible to dynamically determine how many levels there are in the array ary? var ary = ["a","b",["c","d"],"e",["f","g",["h","i"],"j"]]; Output: 3 var ary = ["a","b",[" ...
Looking to implement a popup dialog that requests user input and returns the value. The popup component is included in the root component, positioned above the app's router outlet. Within the popup component, there is an open() method that toggles a ...
My journey with Material UI version 5 has just begun. In the past, I would utilize makestyles to incorporate my custom theme's styles; however, it appears that this method no longer works in v.5. Instead of relying on {createMuiTheme}, I have shifted ...
To better understand the issue I am experiencing, please take a look at the image linked below: The concept and problem I am facing is related to creating a weight chart similar to the one shown in the picture or on this site , here is the description of ...
Is there a ternary operator in Angular 1.2.19 for templates that allows displaying a variable as an input value if it exists, otherwise display the placeholder? Something like this: <input type="text "{{ if phoneNumber ? "value='{{phoneNumber}}&a ...