05.14.12

Horizontal and Vertical Centering with CSS

Posted in programming, web at 10:04 am by danvk

I recently center some content both vertically and horizontally on a web page. I did not know in advance how large the content was, and I wanted it to work for any size browser window.

These two articles have everything you need to know about horizontal centering and vertical centering.

The two articles don’t actually combine the techniques, so I’ll do that here.

In the bad old days before CSS, you might accomplish this with tables:

<table width=100% height=100%>
  <tr>
    <td valign=middle align=center>
      Content goes here
    </td>
  </tr>
</table>

Simple enough! In the wonderful world of HTML5, you do the same thing by turning divs into tables using CSS. You need no fewer than three divs to pull this off:

<div class="container">
  <div class="middle">
    <div class="inner">
      Content goes here
    </div>
  </div>
</div>

And here’s the CSS:

.container {
  display: table;
  width: 100%;
  height: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  display: table;
  margin: 0 auto;
}

A few comments on why this works:

• You can only apply vertical-align: middle to an element with display: table-cell. (Hence .middle)
• You can only apply display: table-cell to an element inside of another element with display: table. (Hence .container)
• Elements with display: block have 100% width by default. Setting display: table has the side effect of shrinking the div to fit its content, while still keeping it a block-level element. This, in turn, enables the margin: 0 auto trick. (Hence .inner)

I believe all three of these divs are genuinely necessary. For the common case that you want to center elements on the entire screen, you can make .container the body tag to get rid of one div.

In the future, this will get slightly easier with display: flexbox, a box model which makes infinitely more sense for layout than the existing CSS model. You can read about how do to horizontal and vertical centering using flexbox here.

Permalink Comments

04.10.12

The Sunrise/Sunset Onebox, Now in Many Languages

Posted in personal at 12:14 pm by danvk

Nearly two years ago, I wrote about launching the Sunrise/Sunset Onebox, which tells you when the sun will rise or set in any location.

You trigger it in English by search for [sunset nyc] or even just [sunset] to get times for your current location.

Over the weekend, I launched the onebox in 30+ new languages. It’s pretty cool to see your work in a language that you don’t understand. Here are a few examples:

Arabic: [غروب الشمس في المدينة المنورة] = [sunset in medina]

Or in Vietnamese: [mặt trời mọc Hà Nội] = [sunrise in Hanoi]

Or in French: [coucher de soleil paris] = [sunset paris]

The translated onebox is proving particularly popular in Arabic-speaking countries, where the sunrise is important for prayer times. It will be interesting to see whether there’s a spike in Hebrew queries on Friday, when Israel observes the sabbath beginning at sundown.

This launch has been more of a slog than I ever would have expected, so it’s gratifying to see it out there in the wild, being used. The world’s languages are a baffling mix of left-to-right and right-to-left. Arabic gets a special shout-out here for its plural forms. It has different word endings for quantities of 1, 2-10 and 11+!

Permalink Comments

02.12.12

Happy People: A Year in the Taiga

Posted in movies, reviews at 10:06 pm by danvk

Last fall, I was excited to read about Werner Herzog and Dmitry Vasyukov’s new film, Happy People: A Year in the Taiga.

I bought tickets for its one-night premiere at the IFC. Raven and I raced from our dinner to catch the 9 PM show… only to find out that it had been the night before. A tragic mistake for a one-night only show!

I recently found a full copy of the film on YouTube and we watched it. (Pro tip: the volume is a little low in the YouTube video. You can visit saveyoutube.com to download it to your hard drive. Then watch it in a desktop player like VLC with the volume turned up past the max.)

Herzog and Vasyukov glamorize life in the Taiga. The fur trappers’ existence is simple. They have few material possessions which they do not make themselves. A rifle, snowmobile and outboard motor are the lone exceptions. There’s something immensely satisfying about seeing the hunter making skis and a canoe in the fall, then using them in the winter. They are nearly completely cut off from the modern world. The only intrusion it makes into the film is when a Siberian politician visits on a boat, a curiosity to which the villagers pay little regard.

The men live for the winter hunt, and this is clearly the part of their lives which the filmmakers found most interesting. We hear more about their hunting dogs than we do about their wives or children. The only time we see real emotion from a hunter is when he describes watching a bear kill his favorite dog. Less pleasant things are talked of only briefly: the native people have been largely displaced by ethnic Russians, and those who remain are alcoholics. The protagonist of the movie was brought to Bakhta by helicopter thirty years ago to trap for the communist government. They had few supplies. Another man came with him, but he was “not up to the task” of survival.

This is a beautiful film which offers a glimpse into an increasingly rare way of life. Herzog and Vasyukov portray it as simple and remote, but I think is more due to their editing than to the reality of life in Bakhta. What about the women, who never speak in this film? Or the natives? Happy People leaves you respecting the people who live in the Taiga, but wanting to know more about them.

Permalink 1 Comment

01.20.12

Accurate hexadecimal to decimal conversion in JavaScript

Posted in javascript, programming at 4:05 pm by danvk

A problem came up at work yesterday: I was creating a web page that received 64-bit hex numbers from one API. But it needed to pass them off to another API that expected decimal numbers.

Usually this would not be a problem — JavaScript has built-in functions for converting between hex and decimal:

parseInt("1234abcd", 16) = 305441741
(305441741).toString(16) = "1234abcd"

Unfortunately, for larger numbers, there’s a big problem lurking:

parseInt("123456789abcdef", 16) = 81985529216486900
(81985529216486900).toString(16) = "123456789abcdf0"


The last two digits are wrong. Why did these functions stop being inverses of one another?

The answer has to do with how JavaScript stores numbers. It uses 64-bit floating point representation for all numbers, even integers. This means that integers larger than 2^53 cannot be represented precisely. You can see this by evaluating:

(Math.pow(2, 53) + 1) - 1 = 9007199254740991

That ends with a 1, so whatever it is, it’s certainly not a power of 2. (It’s off by one).

To solve this problem, I wrote some very simple hex <-> decimal conversion functions which use arbitrary precision arithmetic. In particular, these will work for 64-bit numbers or 128-bit numbers. The code is only about 65 lines, so it’s much more lightweight than a full-fledged library for arbitrary precision arithmetic.

The algorithm is pretty cool. You can see a demo, read an explanation and get the code here:
http://danvk.org/hex2dec.html.

Permalink Comments

01.14.12

What’s Going on with Twin Rates?

Posted in science at 4:57 pm by danvk

I recently built a version of the CDC’s Vital Statistics database for Google’s BigQuery service. You can read more in my post on the Google Research Blog.

The Natality data set is one of the most fascinating I’ve ever worked with. It is an electronic record which goes back to 1969. Every single one of the 68 million rows in it represents a live human birth. I can’t imagine any other data set which was more… laborious… to create. :)

But beyond the data itself, the processes surrounding it also tell a fascinating story. The yearly user guides are a tour-de-force in how publishing has changed in the last forty years. The early manuals were clearly written on typewriters. To make a table, you spaced things out right, then used a ruler and a pen to draw in the lines. Desktop publishing is so easy now that it’s easy to forget how much standards have improved in the last few decades.

They’ve had to balance the statistical benefits of gathering a uniform data set year after year with a need to track a society which has evolved considerably. In 1969, your race was either “Black”, “White” or “Other”. There was a question about whether the child was “legitimate”. There were no questions about alcohol, smoking or drug use. And there was no attempt to protect privacy — most of these early records contain enough information to uniquely identify individuals (though doing so is a federal crime).

I included four example analyses on the BigQuery site. I’ll include one more here: it’s a chart of the twin rate over thirty years as a function of age.

A few takeaways from this chart:

• The twin rate is clearly a function of age.
• It used to be that older women were less likely to have twins.
• Starting around 1994, this pattern reversed itself (likely due to IVF).
• The y-axis is on a log scale, so this effect is truly dramatic.
• There has been an overall increase in the twin rate in the last thirty years.
• This increase spans all ages.

The increase in twin rate is often attributed to IVF, but the last two points indicate that this isn’t the whole story. IVF clearly has a huge effect on the twin rate for older (40+) women, but it can’t explain the increase for younger women. A 21-year old mother was 40% more likely to have twins in 2002 than she was in 1971.

My guess is that this is ultimately because of improved neonatal care. Twins pregnancies are more likely to have complications, and these are less likely to lead to miscarriages than in the past. If this interpretation is correct, then there were just as many 21-year olds pregnant with twins forty years ago. It’s just that this led to fewer births.

Chart credits: dygraphs and jQuery UI Slider.

Permalink 4 Comments