-1

I have a web page with two columns:

  • The narrow left column is a vertical navigation bar with a small (or ordinary) sized font
  • The main right column contains the content, which has a mix of fonts (e.g. it starts with a large-size <h1> heading.

Here is a screenshot of the top of the page:

enter image description here

My questions are:

  • Don't you agree that it's important, that the top of the text in the left-hand-column (e.g. ".NET") should align with the top of the text in the right-hand column (e.g. "WYSIWYG")?
  • Is there any design alternative (any way to change the design, perhaps add any extra elements to the design, to make that alignment less important or unimportant?
  • If (or assuming that) it is important, how is it implemented?

I think it's wrong by two pixels at the moment, i.e. the right-hand text is two pixels too low.

I think it's difficult (perhaps impossible) to implement using CSS because:

  • Font height is complicated
  • The two bits of text are different sizes and different font faces
  • The font families aren't even known at design-time (it depends on which fonts exist for the user's web browser)

Is this a known problem? Is there a solution?


Should I instead try to align the baselines of the two columns, to look something like this:

enter image description here

But I don't think I know how to implement that either, using CSS.

Normally it (the baselines of the two bits of text aligning) would happen automatically, except here the two bits of text are not really in the same line (they're not both inline the same line box, in one parent block): because each column is a separate <div>.

  • I've just thought: maybe I can do it by adding a zero-width space character (or something like that), using the font size of the right-hand text, into the left-hand text (perhaps using CSS :after), so that the left hand text will share a line box with an invisible character whose font metrics are the same as the right-hand text. I'll post an answer if I get it working, mean time any other answer would be welcome. – ChrisW Jan 28 '18 at 3:31
0

CSS like the following is enough to implement the 2nd solution above:

#nav.notJumbo a[href='/']::after {
    content: ' ';
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}

This adds, to the first line of the left-hand column, an invisible character (white-space) which has the same font metrics as the text at the top of the right-hand column -- this means the two line-boxes (left and right) have the same size: because they now include same-sized text.

Note:

  • The selector is whatever is needed to select the first anchor (whose href references the web site's home page in this example)
  • The content is an empty space, a white-space, here; you could replace that with a unicode thin-space or zero-width-space
  • The other properties are whatever are necessary (including font-family if needed) to match the font and line-box metrics of the first line (e.g. the heading) of the right-hand column.

I suppose this solves the technical (implementation, how to) part of the question.

I'd still welcome other answers, which may comment on the design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.