Certain parts of typography (letters) respond to width / height of window?

Question

I'm not sure if something like this is possible through CSS, but then again the talented folks in this community have proven me wrong numerous of times so here we go!

I was wondering if it is possible for certain horizontal parts of the letters O, U, and E can respond with with the window's width while maintaining its position? On the image below, I have drawn out how the responsive typography reacts to the window scale. Please note that the set type are placed within a page-wrap and placed vertically in the middle of the window.

How might I accomplish this? And should what format should I work with (svg, shapes, etc.)

Thank you in advance!

Answer 1

You can do it simply by just having overlaid elements inside a div with overflow:hidden: the extended letter shapes are created with SVG, and hidden underneath the left hand divs. When the user resizes the window, the right div slides out revealing the elongated parts. eg.

<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 is an example of scaling SVG elements based on screen width. This would depend on having a way to select the character elements you're trying to modify (for instance, the bottom of the bowl of the U). In this example, the rectangle element has a unique ID.

HTML:

<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:

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

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

http://jsfiddle.net/bangarang/tgcw1fop/