Ensuring Consistent Vertical Alignment Across Any Imagery

Question

Ensuring Consistent Vertical Alignment Across Any Imagery

Trying to maintain vertical rhythm on a page with images of unknown heights is proving to be a challenge. I came across a solution on Stack Overflow, however, since I am using vanilla javascript instead of jquery, utilizing a jquery plugin is not an option for me. The alternative answer involves setting the baseline in JavaScript, but I have already set it in my SCSS files and do not want to duplicate the hard-coded values all over again.

Another potential solution from another Stack Overflow thread involves additional markup that I find cumbersome due to style concerns. It feels reminiscent of the days when nested <div> tags were necessary just to achieve rounded corners.

An idea emerged to use generated content to pass JSON to JavaScript. However, upon further research, I discovered an example employing the same method, making me question if there could be a better approach.

Is there a more efficient way to accomplish this task? My ultimate goal is to specify that the height of an element must be a multiple of a given value. Some sources suggest that CSS alone cannot achieve this, although I believe calc might come close - yet, I lack the expertise to implement it effectively. Is there a superior method to transmit the required value to JavaScript?

Any advice or guidance would be greatly appreciated.

javascript json sass cssom

Answer 1

Answer №1

After some consideration, I realized that utilizing CSS variables and then retrieving those values from JavaScript is a more efficient approach as detailed here.

This method offers several benefits:

It leverages the cascade to allow different sections of the page to each have their unique vertical rhythm.
It eliminates the need to parse the content of the ::after pseudo-element as JSON. Some browsers tend to handle escape embedding quotes in the content attribute inconsistently.

However, one drawback is that custom attributes are not as universally supported as pseudo elements. This may result in some browsers breaking. Since this issue pertains only to aesthetics, I consider it an acceptable compromise.

const foo = document.getElementsByClassName('foo')[0];
const bar = document.getElementsByClassName('bar')[0];
const fooStyles = window.getComputedStyle(foo);
const barStyles = window.getComputedStyle(bar);
const fooVR = fooStyles.getPropertyValue('--vertical-rhythm');
const barVR = barStyles.getPropertyValue('--vertical-rhythm');

foo.innerHTML = '--vertical-rhythm: ' + fooVR;
bar.innerHTML = '--vertical-rhythm: ' + barVR;

:root {
  line-height: 1.5rem;
  /* $line-height */
  --vertical-rhythm: 3rem;
  /* 2 * $line-height */
}

.foo {
  --vertical-rhythm: 6rem;
  /* 4 * $line-height */
}

<div class="foo"></div>
<div class="bar"></div>

Answer 2

After some consideration, I realized that utilizing CSS variables and then retrieving those values from JavaScript is a more efficient approach as detailed here.

This method offers several benefits:

It leverages the cascade to allow different sections of the page to each have their unique vertical rhythm.
It eliminates the need to parse the content of the ::after pseudo-element as JSON. Some browsers tend to handle escape embedding quotes in the content attribute inconsistently.

However, one drawback is that custom attributes are not as universally supported as pseudo elements. This may result in some browsers breaking. Since this issue pertains only to aesthetics, I consider it an acceptable compromise.

const foo = document.getElementsByClassName('foo')[0];
const bar = document.getElementsByClassName('bar')[0];
const fooStyles = window.getComputedStyle(foo);
const barStyles = window.getComputedStyle(bar);
const fooVR = fooStyles.getPropertyValue('--vertical-rhythm');
const barVR = barStyles.getPropertyValue('--vertical-rhythm');

foo.innerHTML = '--vertical-rhythm: ' + fooVR;
bar.innerHTML = '--vertical-rhythm: ' + barVR;

:root {
  line-height: 1.5rem;
  /* $line-height */
  --vertical-rhythm: 3rem;
  /* 2 * $line-height */
}

.foo {
  --vertical-rhythm: 6rem;
  /* 4 * $line-height */
}

<div class="foo"></div>
<div class="bar"></div>

Ensuring Consistent Vertical Alignment Across Any Imagery

Answer №1

Similar questions

Guide on transmitting two multidimensional arrays using json_encode in PHP

Manipulating the InnerHTML content of a total of 144 individual cells

Enhance Your Profile with Bootstrap 4 Dropdowns

Unable to create a pie chart with chartjs using JSON data

Utilizing Props to Manage State within Child Components

Tips for managing back and forth navigation in react native webview component using custom components on iOS

form for submitting multiple data via Ajax

Displaying data from a JSON file retrieved through AJAX within AMP

Leveraging Axios for Retrieving XML Information

What is the procedure for incorporating JavaScript into my tic-tac-toe game's HTML and CSS?

The content selected in a bootstrap multiselect dropdown may break across multiple lines

Dynamic Search Feature Using AJAX on Key Press

"Obtaining JSON data with jQuery results in an empty response

mention a particular anchor by clicking on it to refresh the webpage

The Material UI Select Component has the ability to transform a controlled text input into an uncontrolled one

Expand Elements to occupy entire width

How to use React hooks to flip an array

Insightful examination of listview functionality on Android devices

The issue of jquery fade out and redirection not functioning properly in Internet Explorer is causing

Unable to submit a fetch request