Do specific elements of typography adjust according to the size of the window?

I'm always amazed by the creative solutions that come out of this community. So I'm reaching out to see if anyone knows a way to achieve something unique with CSS!

Specifically, I'm curious if it's possible to make certain horizontal parts of the letters O, U, and E adjust in response to the window width while keeping their position fixed. In the image below, I've sketched out how the text should scale responsively with the window size. Keep in mind that the text is contained within a page-wrap and vertically centered on the screen.

Does anyone have any suggestions for how I could make this happen? And what type of approach should I use (SVG, shapes, etc.)?

Thanks in advance for your help!

javascripthtmlcsstypography

Answer №1

To achieve this effect, you can use overlaid elements within a div that has overflow:hidden property applied to it. The extended letter shapes are created using SVG, hidden underneath the left-hand divs. As the user resizes the window, the right div slides out revealing the elongated parts. For example:

<div id="clipper">
 <svg id="leftpart" x="0px" y="0px" width="30px" height="150px">
  <rect x="0" y="0" width="30" height="150" fill="red"/>
 </svg>

 <svg id="rightpart" x="0px" y="0px" width="2000px" height="150px">
     <rect  x="0" y="0" width="2000" height="30" fill="black"/>
     <rect  x="0" y="60" width="2000" height="30" fill="black"/>
     <rect  x="0" y="120" width="2000" height="30" fill="black"/>
 </svg> 
</div>


#clipper{
  position: absolute;
  top:200px;
  left:200px;
  width:40%;
  overflow: hidden;

}

#rightpart {
  position: relative;
  z-index:1;
}

#leftpart {
  position: absolute;
  z-index:2;

}

Answer №2

Here's an interesting technique for scaling SVG elements based on screen width. To implement this, you'll need a way to target the specific character elements you wish to adjust (such as the U's bowl bottom). In the provided code snippet, the rectangle element is given a unique ID.

Snippet:

<svg version="1.1"
     baseProfile="full"
     width="200" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect id="foo" height="100" width="100" />

</svg>

CSS Styles:

#foo {
    fill: #f00;
    transform: scaleX(0.5);
}

@media only screen and (min-width: 500px) {
    #foo {
        transform: scaleX(2);
    }
}

Check out the demo here!

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

Prepare for the possibility of being labeled a failure, even if you have already been labeled

I wrote a test case code using Jest to check the functionality of my application. let ticketsTransformer = new TicketTransformer(); ticketsTransformer.transform = jest.fn(() => results); expect(ticketsTransformer.transform).toHaveBeenCalled(); con ...

javascriptnode.jsjestjs

PHP version 7.2.1 is throwing an error indicating an undefined index for the file_upload

Encountering an error message: Notice: Undefined index: file_upload in C:\MAMP\htdocs\basic_files\upload.php on line 3 Each time I attempt to upload a file using the form. While many attribute this issue to problems with enctype or ...

phphtmlfile-uploadundefined-index

Safari having trouble auto-playing Vimeo iframe embed

Update 6/26/23: Seems like a mysterious change occurred, as now the Vimeo video on project pages is playing automatically for me in Safari without any specific reason. It's working fine on Chrome too. Not sure if Vimeo made an update or if it's r ...

javascripthtmlangulariframevimeo

What is the best way to obtain the output produced by a function when a button is clicked

When I click on a button, the desired action is to trigger a function that adds a new property inside an object within a large array of multiple objects. This function then eventually returns a new array. How can I access and utilize this new array? I am ...

javascriptreactjsfunctionusecallback

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

Create a string that has been properly formatted

I need a javascript alternative to the StringEscapeUtils in java, specifically for converting input strings like: He didn't say, "Stop!" The desired output format should be: He didn't say, \"Stop!\" Is there a similar function a ...

javascriptstring

Executing SQL queries in JavaScript using PHP functions

Is it allowed, or is it a good practice? It worked for me, but what issues might I face in the future? Just to clarify, I am new to PHP scripting. // button <button type="button" class="btn btn-primary" id="Submit-button" >Save changes</button> ...

javascriptphpsql

Guidelines for incorporating role-based permissions in a React application

I am developing a MERN application that has various features catering to different roles. I need the ability to display specific data, navigation options, and divs based on the user's role while hiding these elements from others. It is important to no ...

javascriptnode.jsreactjs

What is the best way to create a nullable object field in typescript?

Below is a function that is currently working fine: export const optionsFunc: Function = (token: string) => { const options = { headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, } ...

javascripttypescript

Angular UI directive for modal confirmation

Looking to create a custom Angular directive using angular-bootstrap that mimics the confirm() function. Check out the visual result and desired behavior in this plunk: http://embed.plnkr.co/27fBNbHmxx144ptrCuXV/preview Now, I want to implement a directi ...

javascriptangularjsangularjs-directiveangular-ui-bootstrap

After refreshing the page, the local storage does not appear

I've been struggling to get it working for hours with no luck. After submitting the form, I create local storage values for name, surname, and email so that they can be automatically filled in the form next time without requiring the user to retype th ...

javascriptangularjs

Selecting an option from dropdown1 to retrieve a specific value from a JSON file

I currently have 2 dropdown lists to fill with data from a JSON file: $scope.categories = [ {name:"Blouse", sizes:["36","38","40","42","44","46","48","50"]}, {name:"Shirt", sizes:["36","38","40","42","44","46","48","50"]}, {name:"Pants", size ...

javascriptangularjsjson

Using touch-action to enable movement from the last item to the first item in HTML/C

Currently, I am utilizing the touch-action property in my carousel which auto slides without any issues. However, I am facing a problem where when I scroll using touch-action, it stops at the last slide instead of looping back to the first slide. My goal i ...

javascriptjqueryhtmlcss

Nested divs with inline formatting

On my HTML page, I have the following structure: <div id="frst"> FIRST </div> <div id="top"> <div id="mid"> <div id="bottom"> <ul class="menu"> <li>A</li> ...

csshtmlinline

Why does the child Vuex Store Object return undefined while the parent returns correctly?

I've come across some similar inquiries, but none quite fit my specific scenario. Upon logging this.$store.state.account, the expected results are displayed {__ob__: Nt} user: Object favorites_playlist: (...) firebaseI ...

javascriptfirebasevue.jsfirebase-realtime-databasevuex

Incorporating a splash of color while changing the background color on scroll

Is it possible to include more colors between the "beginning-color" and the "ending-color" in this code that changes the background color on scroll? example $(document).ready(function(){ var scroll_pos = 0; var animation_begin_pos = 0; ...

jquerycsscolorsbackground

Transforming color images into black and white using JavaScript

     I have implemented this code to convert colored images to grayscale. function applyGrayscaleEffect() {         var imageData = contextSrc.getImageData(0, 0, width, height);         var data = imageData.data;         var p1 = 0.99;   ...

javascripthtmlcssslider

Importing PNG files through AJAX and rendering them on a canvas using a Flask server

How can I render a PNG image received via an AJAX call in a canvas? A video file (mp4) is uploaded via AJAX to a Flask server. The first frame is extracted using Cv2, saved, and then returned to the client. I am able to retrieve the PNG data as a string, ...

javascriptjqueryajaxflask

Elements with v-for directive failing to display

I am attempting to incorporate a component using v-for. The data source infoTexts is structured as an Object where the locale code serves as the key and the corresponding message is the value. For example: { nl: 'Text in Dutch', fr: &apo ...

javascriptvue.jsvuejs2

CSS PopUp positioning

Can anyone help me with applying the position top and bottom of header to the NewUser div? I've tried but it's not working. How can I add !important; to the CSS? Maybe something like $("header")!important} <div id="divNewUser" class="CreateUs ...

jqueryhtmlcss