Exploring the depths of CSS line-height

Have you noticed the difference in line height between these two paragraphs on Safari and Chrome? Shouldn't the default line height be 1.0, representing the "natural" height of a particular font (where descenders from the line above do not clash with ascenders from the line below)? I've observed that when set to 1.0, descenders can get cut off by the line below, depending on the chosen font.

JSFiddle

<p style="font:14pt/1.0 Times">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus mi vel erat finibus, eu tincidunt vehicula quis eu odio. In vel nisi non odio consequat porta in eros, sit amet tincidunt nunc dictum eu. In rhoncus convallis dapibus.</p>
<p style="font:14pt Times">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus mi vel erat finibus, eu tincidunt vehicula quis eu odio. In vel nisi non odio consequat porta in eros, sit amet tincidunt nunc dictum eu. In rhoncus convallis dapibus.</p>

I have integrated an HTML "web view" into my iOS app and wish to give users control over line spacing. I have found that using values like 1.2, 1.8, and 2.4 for single, one-and-a-half, and double spacing work best. Anything less than about 1.2 leads to overlapping lines.

In previous inquiries, some sources describe 1.2 as equivalent to normal, which seems accurate.

My secondary concern is determining how to calculate at runtime (considering possible device variations) the necessary multiplier for line spacing to prevent overlap. Can I confidently rely on 1.2 as a universal standard?

htmlcssgoogle-chromesafariwkwebview

Answer №1

One factor that influences line height is the font itself. Different font families may have varying line heights based on their characters. For example, Times New Roman has a different default line height compared to a sans-serif font (the browser's default).

Standard The actual line height value can vary depending on the user agent. Most desktop browsers, like Firefox, typically use a default value around 1.2, which is influenced by the element's font family. You can find more information about this on Mozilla Developer Network.

Answer №2

After some investigation, it has been discovered that setting the line-height to 1.0 actually results in a "slight overlap of lines when writing each line". This forces every single Web designer around the globe to tweak the line-height manually to anticipate how various browsers will interpret it, rather than having a few browser developers ensure their software works flawlessly from the start.

UPDATE: Further examination has unveiled that by creating a UIFont with the specific font family and size, you can determine the precise multiplier for line height by dividing the lineHeight property of the UIFont by the pointSize property. While this may not be applicable to websites, it proves highly effective when dealing with an embedded web view as mentioned in the initial question.

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

What could be causing the malfunction of this JavaScript dropdown select feature in Internet Explorer?

I created a website that requires users to input their location, including the city and state. The process involves two dropdown menus: - The first dropdown menu, labeled "state," loads all USA states as selectable options when the website is loaded. This ...

javascriptjqueryhtmljsoninternet-explorer

Utilizing Bootstrap 4 for a responsive layout: positioning a <div> element adjacent to a centered image

I am currently working on a project involving an image gallery. My goal is to showcase the images in a specific layout: https://i.sstatic.net/cXcql.png Essentially, the image should always be centered. If there is sufficient space to the right, I want to ...

htmlcsstwitter-bootstrapbootstrap-4

Calculating the total number of days in each month within a specified date range using PHP in a dynamic way

Thank you for taking the time to help me with my issue. For instance, if a user selects a date range from 10 Dec 2016 to 20 April, how can I calculate the number of days for each month within that range? For example, Dec=22 Days, Jan=31 Days, Feb=28 Days, ...

javascriptphpjqueryhtmlcss

Update Button Visibility Based on State Change in ReactJS

Currently, I'm utilizing a Material UI button within my React application. Despite changing the state, the button remains visible on the screen. Here's the relevant code snippet: function MainPage() { const state = useSelector(state => sta ...

javascriptcssreactjsreact-hooksmaterial-ui

`A brief disruption in loading the visual style of Google Maps`

Using the Ionic Framework, AngularJS, and Google Maps API, I encountered an irritating issue with my mobile app. Every time the map loads, there is a noticeable delay in loading the map style. This delay is particularly problematic as my map style converts ...

javascripthtmlangularjsgoogle-mapsgoogle-maps-api-3

When making a POST request using formData through AJAX, the $_POST variable remains empty

Below is the form: <form id="complaintForm" enctype="multipart/form-data" method="POST"> <input type="number" id="isComplaintForm" value="1" hidden> <label for="fname&q ...

javascriptphphtmlajax

Why does my timer consistently increase by a specific amount every time I refresh?

I've encountered an issue with my Vue.js script that adds time to my stopwatch every time I refresh the page, consistently adding an extra 6 hours. The script consists of a button that starts tracking time when clicked and posts the time to a Django m ...

javascriptpythonhtmldjangovue.js

jQuery animation not executing as expected due to transition issues

I'm looking to create a cool effect where the previous quote disappears and a new one appears when I click on a button, all with a smooth transition effect. In my attempt below using jQuery .animate and opacity property, I'm struggling to make i ...

javascriptjqueryhtmlcss

How can you target a custom tag using a wildcard in CSS?

Within my Angular application, I have various component pages such as <app-page-home>, <app-page-login>, <app-page-documentation>, etc. that are displayed when needed in the <router-outlet>. I am facing a challenge where I want to ...

htmlcssangular

Utilizing the 'Day' Function in Visual Basic to alter the date and submit a form according to the day of the week

I have been developing a Windows application that utilizes the WebBrowser control to automate form filling based on specific criteria. One challenge I encountered is with dates on certain forms, where different rules apply depending on the day of the week. ...

javascripthtmlvb.net

Learn how to use Angular for submitting a form with AJAX interactions

Hello, I am a beginner with Angular and I have been trying to submit a form and check in my MySQL database if the user is present. All of my code works because when I directly input the JSON into my PHP/CodeIgniter code, I get the employee that I'm lo ...

phphtmlangularjscodeigniter

Can file input buttons be custom styled?

Since I am using Material-UI, the traditional methods are not working for me. I have a form with two buttons positioned next to each other. One button is an "Upload File" input for users to upload a file, and the other is a submit button. I want both butto ...

javascriptcssuser-interfacematerial-ui

Creating a dynamic table with CSS: implementing two unique hover colors

Currently, I am working with a table that serves as a check list for a collection. My goal is to find a way to change the hover color of the table to GREEN if it's an item I own, and to red if it's an item I don't own. Since I am a beginne ...

csscolorshighlight

Transforming text into visuals

My current project involves a web application that showcases the profiles of more than 600 individuals, each featuring a unique word cloud. These word clouds are generated using HTML. Recently, the client has asked for the same word clouds to be integrate ...

c#.nethtml

Creating a selection area with CSS that appears transparent is a straightforward process

I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving ...

javascripthtmlcss

Designing div arrangements

I am trying to create a layout of divs similar to the one shown in the image: https://i.sstatic.net/DLUe8.png The challenge I am facing is that I need to arrange them in a row, with one large div in the center and four smaller divs on the sides. I am plann ...

csslayoutcss-float

What is the best way to trigger a JavaScript function whenever a field reaches a specific length?

I need to update a function that currently triggers when the user clicks or tabs out of the employee_number field. My goal is for it to run whenever the length of the entered numbers reaches 6, without requiring the user to leave the field. When I attempte ...

javascripthtml

Achieve a vertical fill effect within a parent container using CSS to occupy the remaining space

I have set my sights on a specific goal. https://i.sstatic.net/BqqTX.jpg This represents my current progress in achieving that goal. https://i.sstatic.net/unQY9.jpg On the left side, I have an image with a fixed height. The aqua color fills the left s ...

htmlcssbootstrap-5

jQuery Selectors with Variable

Having trouble incorporating variables in selectors using jQuery. It's a small issue, but quite frustrating! Check out this jsFiddle for an example: The code snippet below is not functioning as expected: var folder_id = "folder"; $("#selects select ...

jqueryhtmlvariablesselect

What causes my `` to function intermittently?

I've been experimenting with adding attributes and styling to elements. Sometimes my code works perfectly fine, while other times it doesn't produce the desired output. Here's an example of when it works: $('.card-text') .text( ...

javascriptjqueryhtmlcsstwitter-bootstrap