TrackJS is a sponsor of JavaScript MN, a JavaScript user group for the Twin Cities and really, as the name suggests, all of Minnesota which really only has one metropolis, the Twin Cities. TrackJS, made in the Minnesota town of Stillwater, offers solutions which tell you what's going on with your code in other environments and your own environment. Wednesday night, I went to JavaScript MN for my first time and for its last time hosted at Olson. The first of two talks was by a Tamara Temple of Gannett. In a ReactJS application typically the default "yarn start" component is the app component. Tamara demonstrated dropping it into Storybook and using Storybook to test a component in a sandbox without having to Selenium test the whole of an application. You may just test components in isolation with Storybook. In another scenario in which a combo box was querying with GraphQL for what it might display in its autosuggest, the GraphQL part could be faked locally with a mock server and the combo box could be tested in isolation. Styleguidist is a Storybook rival with a bit more of a slant towards CSS and layout. Enzyme is for unit testing a React application. Twilio is also a sponsor of JavaScript MN and it allows for people to make phone calls and send text messages through a cloud solution. Alright, enough with the fluffy introduction. Shalanah Dawson (pictured at left next to Brandon Johnson, who seemed to be head-of-state of Minnesota JS, at right) gave an interesting talk on getting text to display consistently between Adobe Photoshop and copy in HTML. I once worked at Quantum Mail in Austin, Texas for three weeks in 2001. (It's a rough story.) At the time the mainstay of their business came from realtors. Realtors would send postcards advertising homes for sale in MLS (Multiple Listing Service) to random addresses in specified zip codes. The postcards had designs you could customize online. Shalanah Dawson works at White House Custom Color which comparably allows photographers to upload their own photos and then design things like greeting cards with them. I read onto it that the designs were laid out online in some fashion of WYSIWYG HTML editing and then there was some need to translate copy therein to copy in Adobe Photoshop without it looking messed up. Well, honestly maybe the translation went the other way around. I just looked at the photo I had of her end slide and one of the tools advertised there is Adobe Generator which allows you to pull assets out of Adobe Photoshop and into a web site. Alright, either way, there are some inconsistencies to deal with in a transfer. The details had me reliving some things from my token Texas State Technical College class on typography that I wish I could forget all about. One of the big pain points is the difference between line-height in CSS and leading in the print world. There is a concept of a baseline which all letters sit on, and the gap between baseline and baseline is the leading. The tail part of a p or a g that hangs down goes into the next line in this paradigm while on the web all parts of the letter are considered part of a line and the copy is sort of floating in the middle of the line instead of resting at its base.
An imaginary square around a capital letter M which once was the same width as it was tall and the largest letter there was in a set of fonts used for printing is considered a unit of size known as one em square and em height is the height of such a square. I think an em height may be broken down into 1000 units per em (UPM) and in the web way of doing things one might have, for example, a capital letter A that is 667 UPM tall within a 1000 UPM space that has some number of UPM above the A in the line-height and some number of UPM below the A in the line height. If you mix fonts, they will all end up on the same pseudobaseline even as the baseline runs through the middle of the UPM range somewhere. If the fonts all have 30 pixel line-height settings but baselines in different places then they are staggered vertically with maybe one font having a few pixels of margin on top before the space you could consider the line-height starts.
Shalanah found it helpful to wrap different adjacent fonts in span tags (where a given font was set) and then wrap the spans in a div which set the line-height for all fonts and also had a font settings of its own for what she called a strut. The baseline of the strut which makes for sort of an invisible character leading all of the other characters of copy also can affect the alignment of the overall baseline. Shalanah made her own font called Baselined-font which has the baseline all the way to the bottom of the 1000 UPM. This in effect created leading for the web.
There was a second headache that she discussed dealing with. She struggled to understand how Adobe Photoshop determined the height of a font and eventually, after some experimenting, realized that the lower case letter d for each font determines the height of the space from the top of the box you start typing copy in down to the first baseline. This is less interesting though. The geek out on leading really is what impressed me. The HTML trick for web leading from her slides is given here. I don't know how well this works if the copy wraps to a second line.
<div style="line-height: 80px; font-size: 80px; font-family: Baselined-font">
<span style="font-family: Impact">One, </span>
<span style="font-family: Architects Daughter">Two, </span>
<span style="font-family: Permanent Marker">Three</span>
</div>
No comments:
Post a Comment