Region html structure

[dbuenzli]

Currently we have something like this:

<div class="region" id="/val:decoder_col">
  <a href="index.html#/val:decoder_col" class="anchor">#</a>
  <div class="val">
    <span class="keyword">val</span> decoder_col : <a href="index.html#/type:decoder">decoder</>
    <span class="rarr"><span>-&gt;</span></span> int
    <div class="doc">    
      <p><code>decoder_col d</code> is the column number of  ....</p>
    </div>
  </div>
</div>

which is a little bit messy for styling. I think you should delimitate the OCaml definition in a div.

Here are a few alternatives. This one just keeps the same structure and wraps the def:

<div class="region" id="/val:decoder_col">
  <a href="index.html#/val:decoder_col" class="anchor">#</a>
  <div class="val">
    <div class="def">
      <span class="keyword">val</span> decoder_col : <a href="index.html#/type:decoder">decoder</>
      <span class="rarr"><span>-&gt;</span></span> int
    </div>
    <div class="doc">
    <p><code>decoder_col d</code> is the column number of  ....</p>
    </div>
  </div>
</div>

but to be honest that's too much nesting for my taste. I would prefer something flatter like:

<div class="region val" id="/val:decoder_col">
  <a href="index.html#/val:decoder_col" class="anchor">#</a>
  <div class="def">
    <span class="keyword">val</span> decoder_col : <a href="index.html#/type:decoder">decoder</>
    <span class="rarr"><span>-&gt;</span></span> int
  </div>
  <div class="doc">
    <p><code>decoder_col d</code> is the column number of  ....</p>
  </div>
</div>

note that the val class attribution now matches where you did put the val: id which feels right to me.

Two other things with respect to what we see here:

1. I wouldn't generate these # in the output of anchors. Those can be added with CCS.
2. There's a needless unclassifed span around ->

[dsheets]

The nested structure is there to accommodate host sites with fixed-height floating headers. I think your modification makes sense and will probably still work in this case.

Your other points:

1. I'll look into adding the anchor links in CSS (I assume you mean the links...)
2. The extra span around the -> is so it can be hidden but the element itself can be arbitrarily styled (e.g. unicode for humans, ascii for copy-paste).

Both of these nesting behaviors (div/div and span/span) aren't ideal but are necessary due to the lack of structural flexibility in CSS.

[dbuenzli]

The nested structure is there to accommodate host sites with fixed-height floating headers.

Not sure I understand this comment. Which one are you aiming for, the second proposal ?

I'll look into adding the anchor links in CSS (I assume you mean the links...)

I mean this:

<a href="index.html#/val:decoder_col" class="anchor">#</a>

should be this:

<a href="index.html#/val:decoder_col" class="anchor"></a>

and the # added through css.

Regarding -> note that with the current default styling cut and paste doesn't work.

[dsheets]

Ah, I agree about #.

Cut and paste of the arrows currently doesn't work for you? You have tried it since the → was removed from the DOM? It looks like it should copy-and-paste unicode but it definitely doesn't here with Firefox 36.

What happens when you copy and paste an arrow expression?

[dbuenzli]

So with the HTML structure given in my first message c&p gives this (in Chrome 40):

val decoder_col : decoder  int

I think it's because you set the CCS width and height to 0 you should rather tell that the color of the inner span should be the color of the background (which I think will make you get bad points attributed by search engines).

(Side note this is about taste, but personally I don't really care about this prettyfing of arrows, my editor doesn't do that so I like it if the docs show up like my editor would show it. Also I don't think browser c&p is really formalized so these kind of tricks are asking for trouble).

[dsheets]

I tried the color trick and it's not right. The size+overflow trick is more correct (and WFM).

Anyway, you're right that, if we have no global solution, we must use ->.

[dsheets]

I now have a solution using a web font and OpenType ligatures. I've played with it but not cleaned it up (and, of course, this will all be done in customizable CSS).

[dbuenzli]

Ha, I was also thinking about that over lunch.

[dsheets]

Here is my horrible font example:

<html>
<head>
<style type="text/css">
@font-face { font-family: "BeautifulCode"; src: url("data:application/font-woff;base64,d09GRk9UVE8AAAXQAA0AAAAACAwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABMAAAAY4AAAGdFwHC50ZGVE0AAALAAAAAHAAAABxuRRqXR0RFRgAAAtwAAAAqAAAANABJADhHUE9TAAADCAAAACAAAAAgRHZMdUdTVUIAAAMoAAAAQAAAAFCxBbQIT1MvMgAAA2gAAABHAAAAYFYhYsBjbWFwAAADsAAAAEMAAAFKAmIC1WhlYWQAAAP0AAAAMAAAADYFFMPmaGhlYQAABCQAAAAdAAAAJAZsBDtobXR4AAAERAAAABQAAAAUEegCzm1heHAAAARYAAAABgAAAAYABVAAbmFtZQAABGAAAAFZAAACi0q47Qlwb3N0AAAFvAAAABMAAAAg/4MAM3icRY9BSxtRFIXvSzINhuGlCZlGwjSORGgL6cRKcSFmY0gQYtMoVupKDHnJhNYoydMacOdCcewu0EV2pf8gUOlm6EY63ZdCV8WV/gG9z7xAjF2kZ3XOtzjwEfD5gBASeFPnNf6elV8A8QCBJREE8ZiIuEdMeEXUF7/wfBmo3vjy54HqiwdgbG8tZdujovqRfu+N3ZqKDn+DOsBDHa5COoR1YodBuX8MQhTWoQTvrNaOxeob1Qbb5KxR2Nxir5g5k/k3y0apZZSbFmO8mUwmjQ81bhm57TrPbTeqzJgxp42nFuc7c6lUZUgr99RsVsw6489GBv9VhqEwQY7IMSiETM2+3u30Q7Yjig5xHHQdr/NImOJr33zg9A81UUS3X/RT/IYJgpNiUZOJ2wNMDMm56GqYk0wW5fJlCn/hmezgb4ViFylBKp5rtqRi/GQh7WYxg5nTH3IVm9kCKjKs0Bt0MUbwpShoH2VMuHb6yc8szuOK/Ue+xf18/lpGFNprR3ohzVYDmAgg/dRW1Ttgr6BKAAAAAAABAAAAAMw9os8AAAAA0QO3ygAAAADRA7/9eJwlibENACAMwxzamSsY+f8+XKHI9hACbDlcvSiiY8u2i8wD+TwTFwCCAAAAAQAAAAoAHAAeAAFERkxUAAgABAAAAAD//wAAAAAAAHicY2BkYGDgYpBj0GFgdHHzCWHgYGABijD8/88AkmHMyUxPBIoxQHhAORYwzQHEQlCahYGZgQkIGUEQACkoBXB4nGNgYWFg/MLAysDANJPpDAMDQz+EZnzNYMzICRRlYGNmgAFGBiQQkOaawnCAQZfBjtn4vzFDDNOs/6dR1CgAIRMAc0gMkAB4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYdBns/v8H8sH0/yv/j0DVAwEjGwOCQwzAUMxEiu5BCQAKpAk1AHicY2BkYGAA4hCza8vj+W2+MnCzMIDAReYDvHC6isGUuZRpFpDLwcAEEgUABpUIx3icY2BkYGCaxWDKEMPCAALMpQyMDKiAFQAsSwGxAAAAAgAAAAQAAI0EAAEnBAAAegPoAKAAAFAAAAUAAHichZDNSsNAFIXP9A8KItInmI1QIU0nKd1kaaGI4NLuWzJpAjUpyZTSrYgrn8VXcO3atWufwJ0LT6ZjQQSbYe797uHOmTsBcIpnCOy/Szw6Fuji3XEDHXw6buJcXDluoSvuHbdxJn58OtTf2ClaXVYP9lTNAj28Om7gBB+Om7jGl+MWeiJ33IYUT4471F8wQQmNOQxjDIkFdowxKqRUNPUKnl0SW2SsU9IUBXJynUss2ScRwodi7rPDcK0RYciVuN7k0OvTM2HMrf8FMCn13OhYLnYyrlKtTeV5ntxmJpXTIjfTolxqGfpK9lNj1tFwmFBNatWvEj/Xhh639pJ6wJV9SkApN5lZ6Zh4Y7UMG9yx0HG2Yf7vFRH3X8u9HmCEATvrrViNafVrzEgeriYHo0E4CFUwPjbkjFrJf5PZuSS9a3ff5nomzHRZZUUulQp8pZQ8YvgNzG5wnAAAAHicY2BmAIP/DQzGDFgAACgUAbYA"); }

.rarr { font-family: BeautifulCode; font-size: 70em }
</style>
</head>
<body>
<span class="rarr">-&gt;</span>
</body>
</html>

[dsheets]

Fixed by 2dd1bca.