Isaac Asimov, in his Guide to Shakespeare, gives a rationale for his choice of arrangement:

Since I am chiefly interested in this book in the historical, legendary, and mythological background of the events described in the various plays, I have decided to place the plays in the chronological order of those historical events as far as possible.

On what basis could we form a similarly cogent rationale? What is it that we are “chiefly interested” in?

Beauty and pleasure, of course. Bringing the beauty and pleasure of Shakespeare to new media. We have already said that this “new media” is in its infancy, and that the best way to understand it is to create it. That doesn’t give us much to go on. But we also say that it’s about using more human capabilities… more than just the interpretation of symbols. It’s considered a bad practice to make people “think”, and to make people “choose,” which is an emotionally demanding act. On the other hand, we want to make something useful, and something that is easy and pleasurable to use when you do know what you’re looking for.

With all that said, we have some practical constraints.

surveyability

(for lack of a better term) We’d like to fit all of the names on the screen at once, when the screen is able to display them readably. This is something we talk about elsewhere. What would we do if we had infinite space? We’d of course, still want all of the plays/works to be represented in view. Since even a tablet screen is capable of showing forty titles at once (albeit without much liberty of arrangement), this is mostly a matter of degree and not kind, at least above the phone-size. For phones, of course, some of our ideals must (as usual) give way to the severe size constraints.

adaptibility

We can’t count on a specific layout, anyway. What we have to describe is more of a “program” or set of rules for conveying essentially the same information in various physical configurations.

taxonomy

We acknowledge that the categories of the plays are useful, though not authoritative. For the purpose of arrangement, we’re talking about an exclusive grouping—that is, not a tagging scheme where something can be filed in more than one place.

chronology

We recognize the chronology of the plays as perhaps the only non-arbitrary style of arrangement, but not one that is undertaken without the need for editorial judgement, nor one that is quite useful to general audiences, nor one that quite helps with the design problem. (The “fitting” problem.)

popularity

We acknowledge that not all of the plays/works are equally popular, whether with audiences, actors, producers, critics, or any other respondants. Yet, we would like to abstain from either making or transmitting such judgements.

affordability

Further to the “fitting” problem, it’s also important that signs not be too small to touch. This is especially irritating on mobile screens. You try to hit one sign, and you get another. It’s unpleasant.

Squares are better for this fat-fingering problem. But titles are hard to break into squares, because they vary in length—both the number of words, and the length of the words. You can’t just force all titles to balance well in any given aspect ratio. Single lines are the only equalizer.

speed

We can’t solve this problem with more bytes. This is on the home page—and every page. We have to do more with what we have.

Maybe it’s necessary to separate the aims of providing navigation and information. Yes, we’ve worked very hard to keep these aims flowing from one source. But what? But constraints?

Again, what would we do if we had infinite space?

We could include more. We could show artwork about each of the plays (such as on the JSTOR thing), or quotes from the plays, or quotes about the plays, or have links to songs, or parts of the recordings. I kind of like the idea of featuring some interesting thing from each play, regardless of what type, but that would take you to some random place in the middle of the play. Plus,

I suppose that for the “pain of choice” thing, we could include a “featured play” every month. This would give me time to develop special content for that play, while giving a kind of default path to people who just want to check things out without wanting to choose among forty plays. Yeah, this means that it’s no longer deterministic, and it wouldn’t apply to the app, and so on. But it wouldn’t be hard to do, and it would actually solve a problem.

But come on—are you really going to change what you have?

Yes, I really am. I’m not satisfied with it. It just doesn’t hang together.

I’m thinking about the square thing, though. This would theoretically give you more flexibility to group things differently. I’m not really sure that’s a feature, though. I’m already content with the arrangement within groups.

Think of it this way. You have ≈42 things. That’s about 6x7 or 7x6. Screens are not square. They tend to be 4x3 or in that neighborhood. But close enough. If we target approximately a square, we can work with any orientation, given some margins.

That’s well and good, but we don’t have evenly distributed groups, anyway. And besides, even distributions are harder to remember. Having a “jagged” grouping means that you can visually associate an item with a longer or shorter group. Equalizing things destroys that information.

Also, having a single column within each group allows you to convey a rough chronology with each group. Moving to two columns would destroy that.

Yet… we could use this arrangement to make rough sub-groups (the early comedies, etc). This is of course just the opposite of everything we just said about avoiding such editorialism. But maybe without that, it wouldn’t be clear why the titles are not arranged alphabetically within the groups (i.e. there’s no sign of it being a chronology).

One thing I like about these more “squarish” signs is that they suggest a kind of “mini screen,” which is just what the plays are: another world, which takes over the screen, and to which the signs are portals.

The problem with it, as you might have predicted, is that you “waste” a lot of space. If you have a square sign that is large enough for a title like “A Midsummer Night’s Dream,” it’s necessarily going to leave a lot of empty space when used on a title like “Hamlet,” which is to say, like most of the tragedies.

Still todo:

• [ ] this doesn’t include the poems
• [ ] some of the relevant code is still in the parent document

The first—and only—thing we can say for sure is that Shakespeare did not organize his plays into any kind of hierarchy or taxonomy.

The plays, as a whole, are essentially unstructured and unordered.

The plays are a list. That is, they are flat. We don’t impose any structure on them “physically.”

Remember, the MIT site was made before stylesheets existed (let alone positioned layouts).

But we can treat the arrangement of the signs as a completely separate matter.

If you have room, they’ll be arranged in columns. If you don’t have room, they’ll look like a list.

Yes, we still have to choose a sequence.

But this is clear enough.

Arrangements of the play signs within the works area.

#the-plays-signs
	plain-list()
	position absolute
	top $playsHeadingHeight + $genresHeight
	left 0
	right 0
	height 100vh

@import colors
@import docking
@import paper
@import centering
@import pointing

$playSignHeight = 3em

// Variables for plays.
$comedies = TGV, Err, Shr, LLL, MND, TN, AYL, Ado, Wiv, MV, Tro, MM, AWW
$histories = '1H6', '2H6', '3H6', R3, R2, '1H4', '2H4', H5, Jn, H8
$tragedies = Tit, JC, Rom, Oth, Ham, Lr, Mac, Ant, Cor, Tim
$romances = Per, WT, Cym, Tmp

$longestGenreList = $comedies
$longestGenreListLength = length($longestGenreList)

<<play signs rules>>

stack_plays(plays, group = 0)
	for $play, $index in plays
		#play-{$play}-sign
			top $index * $playSignHeight
			z-index group * $longestGenreListLength + $index

stack_plays($histories, 0)
stack_plays($comedies, 1)
stack_plays($tragedies, 2)
stack_plays($romances, 3)

plays-block($plays, $also = '')
	$s = ''
	for $play, i in $plays
		$s += ',' if i > 0
		$s += '#play-' + $play + '-sign'
	$s += ',' + $also if $also
	{$s}
		{block}

The “play sign” is just used for positioning and sizing. By itself, it’s an invisible box.

.play-sign
	// These are positioned by id in groups.
	position absolute
	overflow hidden
	height $playSignHeight

.play-sign
.play-genre
	left 50%

Whereas the “play sign link” is the physical thing.

.play-sign-link
	display flex
	height 100%
	align-items center
	padding-left .25em
	overflow hidden

	// This is used mainly to demark the play signs, when they are adjacent.
	box-sizing border-box
	border-right 1px solid rgba(#111, .1)
	border-bottom @border-right

	background $paperColor

	+user_pointing_at()
		background $worksLightColor

The “play sign title” is an <i> whose job is to try to be readable.

@import responsive
.play-sign-title
	font-style normal                       // beat <i> default
	letter-spacing -.04em
	white-space nowrap
	<<play sign text rules>>

If the screen is large, the title can grow!

+wide-screen(55rem)
	font-size 125%
+wide-screen(60rem)
	font-size 133%
+wide-screen(65rem)
	font-size 150%

Rather than shrinking the font size for smaller screens, try other measures first: let it wrap to several lines and hyphenate, in which case it looks best centered horizontally.

+narrow-screen(55rem)
	white-space normal
	hyphens auto
	line-height .9
	left 0
	right 0
	text-align center
	max-height 100%
	padding 0 2px
	box-sizing border-box

But if the screen is really small, even that will not suffice.

+narrow-screen(50rem)
	font-size 80%

do_genres(
	$historiesWidth,
	$comediesWidth, $tragediesWidth,
	$romancesWidth)

	$historiesLeft = 0%
	$comediesLeft = $historiesLeft + $historiesWidth
	$tragediesLeft = $comediesLeft + $comediesWidth
	$romancesLeft = $tragediesLeft + $tragediesWidth

	+plays-block($histories, $also: '.play-genre.history')
		left $historiesLeft
		width $historiesWidth

	+plays-block($comedies, $also: '.play-genre.comedy')
		left $comediesLeft
		width $comediesWidth

	+plays-block($tragedies, $also: '.play-genre.tragedy')
		left $tragediesLeft
		width $tragediesWidth

	+plays-block($romances, $also: '.play-genre.romance')
		left $romancesLeft
		width $romancesWidth

This seems stupid, but I think the point was to support alternate arrangements, in which case this would be put under another selector.

For various reasons, we’d like the comedies to be centered. It just looks better: their titles are the longest, and frankly, they’re just the best of Shakespeare’s works overall.³ Plus, a little symmetry helps to anchor the image in your mind.

$poemsWidth = 20%
$ratio = 100% / (100% - $poemsWidth)
$com = 28% * $ratio
$hist = 17% * $ratio
$trag = 19% * $ratio
do_genres(
	$historiesWidth: $hist,
	$comediesWidth: $com,
	$tragediesWidth: $trag,
	$romancesWidth: 100% - ($com + $hist + $trag))

“The poems” heading stays more or less centered vertically (with respect to “the plays” heading), whether it’s on one line or two.

#the-poems
	right 50%

#the-poems-heading
	display flex
	align-items center
	height 5rem
	line-height .8

	@media (min-width 35rem)
		font-size 300%

	@media (max-width 25rem)
		font-size 150%