search

arp242 / hello-css

A CSS template focused on readability
Other
185 stars 11 forks source link

Fix spacing of lines with notes #5

Closed jboynyc closed 5 years ago

jboynyc commented 5 years ago

Right now spacing is uneven in lines that contain footnotes.

Including this should fix the issue:

/* Make sure footnotes don't mess up line spacing */
sup,sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
}
sup {
    bottom: 1ex;
}
sub {
    top: .5ex;
}
arp242 commented 5 years ago

Thanks a lot! I'll definitely take a look at this, but I'm also very busy this week as I'll be moving to the other side of the planet in a few days. I'm not sure yet when I have time, but it may be a week or so.

arp242 commented 5 years ago

Okay, I tested it and seems good :+1:

I'm not sure what the browser support for ex CSS units is? Couldn't really find a good reference for that right now.

Also, do you want to make a PR? Then the changes will be attributed to you. Here's a bit of an updated patch which also adds an example etc.

diff --git c/base.css i/base.css index 7d3b6d4..936f9f9 100644 --- c/base.css +++ i/base.css @@ -337,6 +337,21 @@ table td.right { font-family: sans-serif; /* Libre Baskerville has no aligned numbers :-( */ } +/* SUPER- AND SUBSCRIPT */ + +sup, sub { /* Make sure the line height isn't affected. */ + height: 0; + line-height: 1; + vertical-align: baseline; + position: relative; +} +sup { + bottom: 1ex; +} +sub { + top: .5ex; +} + /* HORIZONTAL RULER */ /* Make the
element look better by replacing it with some text (usually diff --git c/demo/README-fancy.html i/demo/README-fancy.html index 46c2d09..99297d5 100644 --- c/demo/README-fancy.html +++ i/demo/README-fancy.html @@ -226,7 +226,12 @@ Here’s a list of the used value names:

Colour of main body text -

Credits and License

+

See also

+
    +
  • hello-theme, a Pelican +theme based on this (with a few changes).
    • +
+

Credits and license

The Libre Baskerville font in the fonts directory is distributed under the SIL Open Font License 1.1. See fonts/LICENSE.

diff --git c/demo/README.html i/demo/README.html index 251d6f4..1553401 100644 --- c/demo/README.html +++ i/demo/README.html @@ -222,7 +222,12 @@ Here’s a list of the used value names:

Colour of main body text -

Credits and License

+

See also

+
    +
  • hello-theme, a Pelican +theme based on this (with a few changes).
    • +
+

Credits and license

The Libre Baskerville font in the fonts directory is distributed under the SIL Open Font License 1.1. See fonts/LICENSE.

diff --git c/demo/index.html i/demo/index.html index 431474e..d2a99bc 100644 --- c/demo/index.html +++ i/demo/index.html @@ -28,7 +28,7 @@

List taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Element

-

Content sectioning

Text content

Inline text semantics

Embedded content

Demarcating edits

Table content

Forms

Interactive elements

+

Content sectioning

Text content

Inline text semantics

Embedded content

Demarcating edits

Table content

Forms

Interactive elements

diff --git c/demo/sub.html i/demo/sub,sup.html similarity index 89% rename from demo/sub.html rename to demo/sub,sup.html index 0ea846b..fec4271 100644 --- c/demo/sub.html +++ i/demo/sub,sup.html @@ -4,7 +4,7 @@ - sub demo + sub,sup demo @@ -28,7 +28,7 @@ title="Makes it easier to see how it fits in normal content">Show paragraphs of text -

sub demo

+

sub,sup demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, @@ -39,7 +39,8 @@ laborum.

Almost every developer's favorite molecule is - C8H10N4O2, also known as "caffeine."

+ C8H10N4O2, also known as “caffeine”. It’s a programmer’s job to convert caffeine to code. + The Pythagorean theorem is often expressed as the following equation: a2 + b2 = c2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, diff --git c/demo/sup.html i/demo/sup.html deleted file mode 100644 index 243f1bb..0000000 --- c/demo/sup.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - sup demo - - - - - - - - - - - -

- -
- -

sup demo

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, - sunt in culpa qui officia deserunt mollit anim id est - laborum.

- -

The Pythagorean theorem is often expressed as the following equation:

-

a2 + b2 = c2

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, - sunt in culpa qui officia deserunt mollit anim id est - laborum.

-
- - - - diff --git c/dist/all.css i/dist/all.css index b5fa918..918cb26 100644 --- c/dist/all.css +++ i/dist/all.css @@ -381,6 +381,21 @@ table td.right { font-family: sans-serif; /* Libre Baskerville has no aligned numbers :-( */ } +/* SUPER- AND SUBSCRIPT */ + +sup, sub { /* Make sure the line height isn't affected. */ + height: 0; + line-height: 1; + vertical-align: baseline; + position: relative; +} +sup { + bottom: 1ex; +} +sub { + top: .5ex; +} + /* HORIZONTAL RULER */ /* Make the
element look better by replacing it with some text (usually diff --git c/dist/all.min.css i/dist/all.min.css index d34ee88..5e0f3d5 100644 --- c/dist/all.min.css +++ i/dist/all.min.css @@ -275,6 +275,18 @@ table td.right { font-variant-numeric: tabular-nums; font-family: sans-serif; } +sup, sub { + height: 0; + line-height: 1; + vertical-align: baseline; + position: relative; +} +sup { + bottom: 1ex; +} +sub { + top: .5ex; +} hr { border: none; text-align: center; diff --git c/dist/base.min.css i/dist/base.min.css index 4506efc..05d8419 100644 --- c/dist/base.min.css +++ i/dist/base.min.css @@ -250,6 +250,18 @@ table td.right { font-variant-numeric: tabular-nums; font-family: sans-serif; } +sup, sub { + height: 0; + line-height: 1; + vertical-align: baseline; + position: relative; +} +sup { + bottom: 1ex; +} +sub { + top: .5ex; +} hr { border: none; text-align: center; diff --git c/mkdemo i/mkdemo index 13928b9..7d64a38 100755 --- c/mkdemo +++ i/mkdemo @@ -132,13 +132,10 @@ alltags = {

MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.

The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.

''', - 'sub': ''' + 'sub,sup': '''

Almost every developer's favorite molecule is - C8H10N4O2, also known as "caffeine."

- ''', - 'sup': ''' -

The Pythagorean theorem is often expressed as the following equation:

-

a2 + b2 = c2

+ C8H10N4O2, also known as “caffeine”. It’s a programmer’s job to convert caffeine to code. + The Pythagorean theorem is often expressed as the following equation: a2 + b2 = c2

''', 'time': '''

The Cure will be celebrating their 40th anniversary on in London's Hyde Park.

jboynyc commented 5 years ago

I don't really care about the attribution, so go ahead an include your patch.

AFAIK, em and ex units have been supported for a decade or longer.

arp242 commented 5 years ago

Thanks, I committed it.