Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

detect.html page styling work to make all sections in the chapter look consistent (again?) #26

Closed
wants to merge 1 commit into from

2 participants

@GerHobbelt

While reading through the book I noticed that two sections in the 'detect' chapter weren't styled like the others, i.e. each section should have an image more or less related to the subject, with a lean towards classical renderings as found in old vintage childrens' books and publications, immediately followed by a legend between classical horizontal rules stating whether your current browser does or does not support the feature being discussed in that section.

In one case it was simply a matter of moving the existing HTML parts around to their proper spots (and give them the 'ss' class they so desire); in the second case ('Placeholder Text') a completely disparate 'style' was being employed: no image and the reported text is instead an input form field showcasing the matter. I left the input form field as is, yet now correctly positioned in the same location and surrounded by the same layout/formatting as the browser support reports in the other sections so as to make it appear similar to the others as close as possible. It's okay being different, if only a little.

For the image I looked around for some time until I found something that might work, my own lacking drawing skills precluding an alternative for copyright-free artwork. The image is an edited extract of an advertisement (vintage ca. 1930) for the LinoType company. Printing buffs will know about 'Lorem Ipsum' as an ubiquitous 'placeholder text'; the LinoType machines revolutionized the printing industry in such a way that neighbouring industries such as 'font design' could thrive as well, and what do you need to exhibit your new shiny font specimen? Right! Placeholder Text.

In fact, Lorem Ipsum is still alive and kicking, the LinoTypes have been outmoded by computers and PostScript, the link between them as I made it is arguably suspect if you're into the business of splitting hairs, but LinoType remains my answer to your 'Placeholder Text' Rorschach Blot and that's a true fact after all. ;-)

I looked hard for an image matching the B&W rendering of the other images in this book, plus it should have that thing called 'the human interest angle' so no 'clean/unemotional' technical drawings allowed.

The commit includes the PSD (Photoshop file) so you can see what was done to the original; the file name of the PNG image both identifies the origin (where I got the high-rez scan from) and includes the info about the depicted machine (my guess is it's a Model 25 on show here; if I'm mistaken and anyone can correct me, I'd be much obliged) in an attempt to date the ad. (Model 25 was introduced in 1927 and this being an advertisement pointing out their superb merit, you can bet they weren't showing off their old stock).

P.S.: as I wanted to contribute my 2 microgram of worth here, I stumbled across issue #20, which made me expend a tear of joy on this otherwise rotten Sunday. Thank you for extending my vocabulary: if I want to laugh again, all I have to do is recall that line about the 'fusking' police officer.

Rest assured that this commit is made with the utmost effort to adhere to the ethics of both indigenous polities as I'll be making a personalized pull request for both parties. Y'all made me laugh, so you deserve that extra bit of effort in return.

@GerHobbelt GerHobbelt (cherrypicked/amended) providing additional graphic (missing for the …
…'Placeholder Text' section) matching the design of the other sections.
f9b4d1b
@jonathantneal
Collaborator

This was added to the jonathantneal branch and now manually merged into this branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 6, 2012
  1. @GerHobbelt

    (cherrypicked/amended) providing additional graphic (missing for the …

    GerHobbelt authored
    …'Placeholder Text' section) matching the design of the other sections.
This page is out of date. Refresh to see the latest.
View
11 detect.html
@@ -361,9 +361,9 @@ <h2 id=offline>Offline Web Applications</h2>
<h2 id=geolocation>Geolocation</h2>
-<p>Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are &mdash; your <abbr>IP</abbr> address, your wireless network connection, which cell tower your phone is talking to, or dedicated <abbr>GPS</abbr> hardware that calculates latitude and longitude from information sent by satellites in the sky.
+<p class=ss style="width:194px" id=geo-wrapper><img src=i/openclipart.org_johnny_automatic_globe_man.png alt="man with a globe for a head" width=194 height=317><br><span id=live-geolocation></span></p>
-<p style="margin:0 auto;width:194px" id=geo-wrapper><img src=i/openclipart.org_johnny_automatic_globe_man.png alt="man with a globe for a head" width=194 height=317><br><span id=live-geolocation></span>
+<p>Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are &mdash; your <abbr>IP</abbr> address, your wireless network connection, which cell tower your phone is talking to, or dedicated <abbr>GPS</abbr> hardware that calculates latitude and longitude from information sent by satellites in the sky.
<div class="pf clear">
<h4>Ask Professor Markup</h4>
@@ -447,7 +447,12 @@ <h2 id=input-types>Input Types</h2>
<h2 id=input-placeholder>Placeholder Text</h2>
-<form style="float:right;margin:1.75em"><input placeholder="Your browser supports placeholder text" size=38></form>
+<form>
+<p class=ss style="width:261px"><img src=i/www.tjray.info.Mergenthaler.Ad-probably.a.Model.25.ca.1930.png alt="linotype model 25 - one of the machines that helped create a demand for lorem ipsum placeholder text in exhibiting fonts" width=270 height=316><br>
+<span id=placeholder-text>
+<input placeholder="Your browser supports placeholder text" size=38>
+</span>
+</form>
<p>Besides <a href=#input-types>new input types</a>, <abbr>HTML5</abbr> includes several small tweaks to existing forms. One improvement is the ability to set <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute>placeholder text in an input field</a>. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon you click on (or tab to) the input field, the placeholder text disappears. The <a href=forms.html#placeholder>chapter on web forms</a> has screenshots if you&#8217;re having trouble visualizing it.
View
BIN  i/MergenthalerAd.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  i/www.tjray.info.Mergenthaler.Ad-probably.a.Model.25.ca.1930.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Something went wrong with that request. Please try again.