search

marijnh / Eloquent-JavaScript

The sources for the Eloquent JavaScript book
https://eloquentjavascript.net
3.01k stars 793 forks source link

Overlapping text on Table of Contents #443

Closed gareys closed 5 years ago

gareys commented 6 years ago

Browser: Chrome Version 66.0.3359.181 (Official Build) (64-bit) OS: Windows 10 Breakpoint: Desktop (>=1160px)

In the table of contents, the text (Part 1: Language) overlaps the 1. Values, Types, and Operators text.

overlapping

I was able to fix this by updating the .toc h3 css styles:

.toc h3 {
    position: absolute;
    margin: 0;
    top: 1px;
    right: 0;
    font-family: inherit;
    font-weight: normal;
    font-size: 80%;
    line-height: 1.8;
}

This is how it looks with the applied styles:

fixed

gareys commented 6 years ago

https://github.com/marijnh/Eloquent-JavaScript/pull/444 should do the trick.

marijnh commented 6 years ago

Are you saying your browser window is 1160px wide? For me, at that width, there's plenty room for the part titles. But maybe that's because we have different fonts. Does patch cbd502c help?

gareys commented 6 years ago

Patch cbd502c didn't seem to affect the overlapping issues in the table of contents. See below: Notice chapter 1**

Screen resolution is 1680px wide.

Browser: Chrome 66 OS: Mac OS High Sierra 10.13.3

screen shot 2018-05-22 at 3 52 58 pm
marijnh commented 6 years ago

Screen resolution is 1680px wide.

Ahh, the font chosen on your system is way wider than the one I get. And I screwed up the flexbox styles so that the TOC doesn't get wider than 500px, so the extra screen space didn't work.

Patch bd97dcd fixes the width and makes the part headers float, so that the browser will wrap text to avoid overlap. Is that better?

gareys commented 6 years ago

:clap: So much better.