Clipped Words & Silhouettes

Question

Clipped Words & Silhouettes

I'm having trouble ensuring the text in this particular example displays correctly. I am experiencing challenges with the clipping of text and shadows on certain letters, and I'm struggling to identify the root cause as well as the solution.

In order to fully grasp the issue, please refer to this jsfiddle (Removed). Please remember to refresh the jsfiddle once it loads, as the initial letter clipping may not be visible until then.

The main problem arises when the 'F' letter and its shadow are clipped upon loading (after refreshing). When you hover over the text, 'Second' will appear; however, upon mouseout, the first word reappears but now with the 't' shadow being clipped.

I am unable to figure out how to rectify these issues. Could someone kindly assist me in resolving these clipping bugs? Thank you, Bill

UPDATE: I managed to solve the 'F' letter clipping problem (updated jsfiddle); however, I still require assistance with the 't' clipping issue - Thanks, Bill

BUMP - Anyone available to help? Pretty Please - Bill

javascript jquery html css typography

Answer 1

Answer №1

The issue at hand pertains to the way in which fonts are displayed on a screen. Some fonts, like the one being used here, have serifs that go beyond the actual letter itself. In standard typography, this is managed by allowing the rendering area to exceed the boundaries of the letter, as most applications do not enclose each letter within a box.

It appears that the problem arises from treating each letter as a <span>, resulting in them having individual boxes. The JavaScript code then interferes with properties such as opacity, overflow, and positioning, leading to the CSS rendering enclosing each <span> within a box during the render process.

To resolve this, I recommend refraining from specifying explicit widths and overflows for the spans, and instead allow them to adjust their size automatically while controlling absolute positioning.

If all spans have consistent z-index values and are properly spaced, without any excessive styling applied, it should prevent any clipping issues you are encountering.

An update concerning the font rendering issue has been made: When the CSS plugin makes individual letters partially transparent, they are unable to extend beyond their designated boxes, resulting in clipping problems.

To address this, expanding the size of the boxes sufficiently to avoid clipping and allowing them to overlap should solve the issue. This involves adding adequate padding to the right and left sides of the letters to accommodate their full expression, followed by adjusting with negative margins to realign the letters.

For this particular font and size combination, the following style adjustment may prove effective:

.lslide_wrap a span span.sl-w1 {
    ...
    /* Add the following 2 lines: */
    padding: 0 100px 0 22px;
    margin-left: -22px;
}

You can access an updated version of the original jsFiddle here.

Answer 2

The issue at hand pertains to the way in which fonts are displayed on a screen. Some fonts, like the one being used here, have serifs that go beyond the actual letter itself. In standard typography, this is managed by allowing the rendering area to exceed the boundaries of the letter, as most applications do not enclose each letter within a box.

It appears that the problem arises from treating each letter as a <span>, resulting in them having individual boxes. The JavaScript code then interferes with properties such as opacity, overflow, and positioning, leading to the CSS rendering enclosing each <span> within a box during the render process.

To resolve this, I recommend refraining from specifying explicit widths and overflows for the spans, and instead allow them to adjust their size automatically while controlling absolute positioning.

If all spans have consistent z-index values and are properly spaced, without any excessive styling applied, it should prevent any clipping issues you are encountering.

An update concerning the font rendering issue has been made: When the CSS plugin makes individual letters partially transparent, they are unable to extend beyond their designated boxes, resulting in clipping problems.

To address this, expanding the size of the boxes sufficiently to avoid clipping and allowing them to overlap should solve the issue. This involves adding adequate padding to the right and left sides of the letters to accommodate their full expression, followed by adjusting with negative margins to realign the letters.

For this particular font and size combination, the following style adjustment may prove effective:

.lslide_wrap a span span.sl-w1 {
    ...
    /* Add the following 2 lines: */
    padding: 0 100px 0 22px;
    margin-left: -22px;
}

You can access an updated version of the original jsFiddle here.

Clipped Words & Silhouettes

Answer №1

Similar questions

Passing data through events from a parent component to a child component in Vue.js using the $emit method

Exploring the world of jQuery and Ajax: Experimenting with implementing a POST method through Ajax and retrieving the response in HTML

Is it not possible to include Infinity as a number in JSON?

Experiencing difficulties loading Expo Vector Icons in Nextjs

Using Javascript to dynamically copy text to the clipboard

Calculating the frequency of a variable within a nested object in an Angular application

poor scrolling performance when transitioning focus between elements in the interface

Express.js and gridfs-stream are unable to retrieve the error

Mysterious Loop in JavaScript Unfolding with Three.Js

Ensure that the number is valid using Express Validator in Node.js

Manipulating background scrolling using jQuery

What is the process for converting HTML assets into a SCORM package?

Issue "cannot update headers after they have been sent"

Access error message through ajaxError binding

Issue with the DocPad plugin for Gulp

How come my invocation of (mobx) extendObservable isn't causing a re-render?

Is there a way to make Chrome ask to save a password within an HTML form?

How to emphasize a portion of an expression in AngularJS using bold formatting

employing the d3.queue method to defer execution until receiving the AJAX response

Creating separation between a dropdown menu and its corresponding button