Tips for employing clamp CSS to modify font size while maintaining alignment within a paper-inspired CSS grid

Currently, I am working on creating a responsive text section with a grid-like horizontal line resembling paper, and the challenge lies in aligning the text properly within this grid.

While I can achieve this when the font size remains constant, I am curious if it is achievable using only CSS or if JavaScript is needed.

I have included two CodePen examples - one showcasing the desired outcome with a fixed font size, and the other demonstrating how to accomplish the same effect using the 'clamp' CSS property. However, the latter does not consistently align with the grid as intended.

Below is a code snippet from the CodePen attempt at achieving grid alignment using CSS grid:

:root{
  --fs:clamp(2rem, 4vw , 5rem);
}

.paper{
  position: relative; 
}

.paper h2 { 
  font-size:var(--fs);
  line-height:calc(var(--fs) + 0.05rem);
}

.paper:after {
  content:'';
  position:absolute; 
  overflow:hidden;
  top:calc(-2*var(--fs) - 0.65rem);
  left:-10%;
  width:120%;
  height: 170%;
  z-index:-1;
  background-image: repeating-linear-gradient(
    transparent 0rem, 
    transparent calc(var(--fs) + 0.1rem), 
    rgba(0,0,0,0.2) calc(var(--fs) + 0.2rem)
    );
}

CodePen with Fixed font size

CodePen with Clamp CSS

My question now is whether there is a more effective approach to achieve the same effect - either through CSS or JavaScript?

Answer №1

Utilize the lh unit for optimal results. Take a look at this simplified example where it's crucial to ensure that the font-size is properly set on the element or its parent before using lh.

h2 { 
  font-size: clamp(2rem, 4vw , 5rem);
  line-height: calc(100% + .1rem);
  background-image: repeating-linear-gradient(
    #0000 0 calc(1lh - .1em), /* 1em = line thickness */
    red 0 1lh);
}
   <h2 class="text-4xl"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit pariatur laudantium, placeat dolores veritatis impedit autem fuga ea eos sequi?   </h2>

   <h2 class="text-4xl">Qommodi facere, corrupti quibusdam quasi ad nihil sit? Numquam vitae temporibus corrupti. Odio modi quos, doloribus aliquam accusantium iusto officia temporibus, vitae harum eius ducimus nemo. Aspernatur ut dolore expedita voluptas eligendi tempora?</h2>

To achieve a full-screen layout, consider utilizing border-image as shown below:

h2 {  
  font-size: clamp(2rem, 4vw , 5rem);
  line-height: calc(100% + .1rem);
  border-image: repeating-linear-gradient(
    #0000 0 calc(1lh - .1em), /* 1em = line thickness */
    red 0 1lh) fill 0//0 100vw ;
    
    
  margin-inline: max(1rem,50% - 400px);
}
<h2 class="text-4xl"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit pariatur laudantium, placeat dolores veritatis impedit autem fuga ea eos sequi?   </h2>

   <h2 class="text-4xl">Qommodi facere, corrupti quibusdam quasi ad nihil sit? Numquam vitae temporibus corrupti. Odio modi quos, doloribus aliquam accusantium iusto officia temporibus, vitae harum eius ducimus nemo. Aspernatur ut dolore expedita voluptas eligendi tempora?</h2>

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

Execute a PHP script upon button click without the need to refresh the page

I'm facing an issue with integrating PHP and JavaScript. Objective: To execute a .php script when the event listener of the HTML button in the .js file is triggered without causing the page to reload. Expected outcome: On clicking the button, the PH ...

Fulfill all of the promises within Bluebird, as well as decline any that do

I am in search of a method to retrieve both successful resolutions and rejections from a promise array. I am relying on the Bluebird implementation, so any ES6 compatible solution would be preferable. One option that comes to mind is utilizing Bluebird&ap ...

Encountering difficulties with updating customer information in postgreSQL

I am attempting to perform CRUD operations using pg-promises and stored procedures in PostgreSQL. Here is my code: controller.js: const db = require("./../index.js"); exports.getAllData = async (req, res, next) => { try { const data = ...

Adjust the color of the text based on a conditional in react

I am looking for a way to select elements and change text color in my unordered list based on specific conditions. Below is an example of the structure I have: <div style={styles.passwordRules}> <ul style={styles.listOne}> <li style={ ...

Accordion menu designed exclusively with JavaScript

Implementation of required menu structure: Main Menu Submenu Contacts News Photo Submenu Submenu Submenu Main Menu Main Menu Main Menu When clicking on the "Main Menu" button, a list of "Submenu" elements opens. Clicking on the "Submenu" button ope ...

Utilizing Flask to gather information from a leaflet map

I am currently working on creating a webpage using Flask. The webpage features a leaflet map where users can click to create a marker that opens a popup window with a link. The link's purpose is to open a new page displaying the longitude and latitude ...

Retrieve the file name of the webpage from the URL bar

Is there a way to retrieve the page name from the address bar using jquery or javascript instead of PHP? I am working on an HTML website and would prefer not to use PHP for this specific task. For example, if the address is www.mywebsite.com/hello.htm, ho ...

Continual dark mode throughout page navigation with the ability to switch between light and dark modes

I've been experimenting with creating a persistent dark mode feature for web pages. My goal is to remember the user's preference as they navigate between pages. Additionally, I included a toggle button for switching between dark and light modes t ...

How to dynamically modify a list box with JavaScript

I have an index.html file with a select tag containing multiple options for a drop-down: <label for="edu">Education</label> <select id="edu" name="edu"> <option value="0">10th</option&g ...

What are the steps to creating code that meets the high-quality standards of Themeforest

My plan is to sell bootstrap templates on the themeforest market but my first template got rejected. I believe the issue lies in the code structure and organization. Could you recommend any books or video courses that can help me write code that meets The ...

Motion graphics following the completion of a form input

In my HTML, I've created a div container with a form field: <div class="flex_item" id="b_one"> <form id="f_one"> <input id="i_one" type="text"> </form> </div> I'm attempting to change the backgroun ...

Troubleshooting: Issue with Passing Variable from Controller to Partial in Rails with AJAX

I am facing an issue with passing a variable from my controller to a partial asynchronously. My goal is to render a form on my view after the user selects an option from a drop-down menu. However, I keep encountering the following error: undefined local v ...

Refresh the DOM based on changes in Vuex store state

One of the issues I'm facing is with an 'Add To Basket' button that triggers a Vuex store action: <button @click="addToBasket(item)" > Add To Basket </button> The Vuex store functionality looks like this: const actions = { ...

Using jQuery that has been installed via npm within an Express application

I recently set up a node.js + express application and utilized npm to install jQuery. Within the app.js file, I included the following code: var jquery = require('jquery'); In the header of my html file, I have incorporated JavaScript that rel ...

Getting the environment variable from Rails in your JavaScript: A guide

I am currently working on implementing a key system within my application. In the code I am using, there is logic that looks like this: $('.key-test-button').on('click', function(){ if ($('.key-test-input').val() === "MYK ...

Troubleshooting a VueJS Problem: Updating $data in the mounted hook

Revision This snippet of Component.vue was extracted from a larger web application where I made a mistake that had significant consequences, all because of a small change I didn't initially notice. An important distinction exists between the followi ...

Discover the myriad of possibilities created by combining arrays

I am working on a code snippet that aims to generate an array containing all possible combinations between two or more arrays. However, I am encountering a specific issue. getCombn(arr: string | any[], pre?: string | undefined) { pre = pre || ' &a ...

What could be the reason for the component bindings being undefined within the controller?

I'm currently working on a basic angular component. I have set up a parameter as a binding and managed to display its value on the screen successfully. The parameter displays correctly, but when I try to access it within the controller, it shows undef ...

What causes my variable to show None instead of the current stock price?

I attempted to extract the stock price data from using BeautifulSoup. However, my program is not displaying the stock price and instead showing "None". How can I correctly retrieve the stock price information? My provided code snippet: from bs4 import Bea ...

Discover the magic of unlocking XML content with the power of XSL!

Hello, I am currently working on transforming an XML archive using an XSL archive. My goal is to generate a table displaying the content of the XML, but I am encountering difficulties in showing the values of two columns named "complexity" and "subject". B ...