diff options
author | Zhiming Wang <zmwangx@gmail.com> | 2015-07-17 21:27:52 -0700 |
---|---|---|
committer | Zhiming Wang <zmwangx@gmail.com> | 2015-07-17 21:47:05 -0700 |
commit | 110cf961113af9d5386cd9ba35404161e473e39b (patch) | |
tree | e16f4e4af4b4e8a8f35483f515257ddf1b843979 | |
parent | 8b6e38dd3c63fbf1badc2fb6492fa9523e0048d9 (diff) | |
download | my_new_personal_website-110cf961113af9d5386cd9ba35404161e473e39b.tar.xz my_new_personal_website-110cf961113af9d5386cd9ba35404161e473e39b.zip |
fix line number placement
Global font size in each style sheet has been tweaked very carefully so
that the precise line height is very close to a whole number of pixels,
so that precision alignment using em, which aligns something
precise (top: 13.5em) to something inprecise (line heights, with
accumulated errors due to rounding in every line), is not lost.
Note that Firefox is NOT supported, since each line seems to always
occupy one more pixel than the calculated line height.
For some reason line numbers in the print view are still rather
problematic at a page continuation. In Chrome and Safari, the first two
line numbers on a new page tend to overlap, so everything afterwards are
off (and on Firefox line numbers do not show up on the second page at
all). Anyway, printing shouldn't be a big concern.
-rwxr-xr-x | pyblog | 6 | ||||
-rw-r--r-- | source/css/print.css | 2 | ||||
-rw-r--r-- | source/css/theme-enlarge.css | 2 | ||||
-rw-r--r-- | source/css/theme.css | 7 |
4 files changed, 9 insertions, 8 deletions
@@ -593,12 +593,12 @@ def _pre_tag_insert_line_numbers(soup, pre_tag): num_lines = len(pre_tag.text.split("\n")) for line_number in range(1, num_lines + 1): # line number divs will look like: - # <span class="line-number" data-line="1" style="top: 1px"><!----></span> - # <span class="line-number" data-line="2" style="top: 19px"><!----></span> + # <span class="line-number" data-line="1" style="top: 0em"><!----></span> + # <span class="line-number" data-line="2" style="top: 1.35em"><!----></span> ln_tag = soup.new_tag("span") ln_tag["class"] = "line-number" ln_tag["data-line"] = line_number - ln_tag["style"] = "top: %dpx" % ((line_number - 1) * CODE_LINE_HEIGHT + 1) + ln_tag["style"] = "top: %.2fem" % ((line_number - 1) * 1.35) # add a comment to the content of the span to suppress tidy5 # empty <span> tag warning ln_tag.append(soup.new_string("", bs4.Comment)) diff --git a/source/css/print.css b/source/css/print.css index 392281ea..298d0677 100644 --- a/source/css/print.css +++ b/source/css/print.css @@ -1,5 +1,5 @@ body { - font-size: 8pt; + font-size: 7.936pt; } article { diff --git a/source/css/theme-enlarge.css b/source/css/theme-enlarge.css index 7fbfb203..64701d96 100644 --- a/source/css/theme-enlarge.css +++ b/source/css/theme-enlarge.css @@ -1,5 +1,5 @@ body { - font-size: 20pt; + font-size: 20.147pt; } nav div.logo { diff --git a/source/css/theme.css b/source/css/theme.css index bd34d434..5827609d 100644 --- a/source/css/theme.css +++ b/source/css/theme.css @@ -1,7 +1,7 @@ body { color: #333; font-family: "PT Serif", serif; - font-size: 11pt; + font-size: 10.99pt; } nav { @@ -90,13 +90,14 @@ pre[class*=sourceCode] { pre code { font-size: 0.91em; + line-height: 135%; } .line-number { position: absolute; left: 0; right: 0; - margin-top: 1em; + margin-top: 0.8em; pointer-events: none; white-space: pre; } @@ -108,7 +109,7 @@ pre code { left: .5em; min-width: 2em; color: #ccc; - font: 500 65%/1.5 sans-serif; + font-size: 0.65em; text-align: center; vertical-align: .3em; } |