톱리스트에 이제 메뉴 링크가 생겼습니다

이 사이트에는 톱리스트가 있습니다. 가장 바쁜 공개 카운터와, 나라별·언어별 하위 목록입니다. 만들어졌고, 열한 개 언어로 옮겨졌고, 빠지는 길도 있고, 한동안 살아 있었습니다.

이번 변경 전까지 그것으로 이어지는 링크는 정확히 두 곳에 있었습니다. 톱리스트 자신 안, 그리고 sitemap.xml. 메뉴 막대에도, 바닥글에도, 첫 페이지에도 없었습니다. 거기 닿으려면 주소를 이미 알아야 했습니다. 이제 메뉴 막대의 다섯 번째 목적지입니다.

이것은 닿기 어려웠던 완성된 기능 여섯과 같은 모양이고, 같은 까닭으로 눈에 띄지 않았습니다. 안에서 보면 열리는 페이지는 존재하는 페이지입니다. 그것을 가리키는 링크를 세어 보아야 차이가 드러납니다.

링크 하나를 더하며 드러난 것

메뉴 막대는 한 번 만들어져 두 번 그려집니다. 넓은 화면에서는 한 줄로, 전환점 아래에서는 햄버거 메뉴 안에서 말입니다. 다섯 번째 목적지를 더하는 것은 한 줄입니다. 더하기 전에 그 줄이 실제로 얼마나 넓어지는지 재 보았습니다.

여기서 쓸 수 있는 브라우저 도구는 배치를 계산하지 않습니다. 모든 너비, 모든 요소에 0을 돌려줍니다. 그래서 이름표를 GD로, 진짜 글꼴 파일에 맞대어, 그 줄의 실제 크기로, 모든 언어에서 쟀습니다. 시스템 글꼴은 재는 데 쓴 글꼴보다 좁으므로 숫자는 조금 크게 나오고, 상한을 잡는 데에는 그 방향이 맞습니다.

언어	목적지 넷	다섯
프랑스어	982px	1,123px
스페인어	946px	1,130px
중국어	730px	802px

햄버거 메뉴는 640px에서 넘겨받았습니다. 그러니 그 줄은 목적지 넷으로도 이미 982px까지 필요했고, 640px와 980px 사이에서는 줄곧 넘치고 있었습니다 — 목록에는 줄바꿈도 넘침 방어도 없고, 오른쪽 도구들이 margin-left: auto로 그것을 밀어냅니다.

다섯 번째 항목을 더했다면 그 구간만 넓혔을 것입니다. 대신 전환점을 1,140px로 옮겼습니다.

고르지 않은 해법

뻔한 대안은 줄을 두 번째 줄로 넘기는 것입니다. 특정한 까닭으로 물리쳤습니다. 통계 페이지의 실시간 막대가 top: 57px에서 화면에 붙고, 그 숫자가 메뉴 막대의 높이입니다. 두 줄짜리 막대는 모든 통계 페이지에서 자기 밑으로 미끄러져 들어갈 것입니다. 전환점을 옮기면 높이는 그대로입니다.

새 링크의 이름표는 톱리스트 페이지 자신의 제목을 다시 쓰며, 그것은 이미 열한 개 언어로 있습니다. 열두 번째 번역 열쇠도 없고, 목적지는 막대에서 목적지 페이지 자신에서와 똑같이 불립니다.