vertical space of <br /> too big
juh2 opened this issue · 22 comments
I am not a typographer but I think that the interline spacing of
is too big.
I use <br></br> to break lines in a poem and the spacing looks the same as with <p>.
Sorry I'm not sure about the styles of Gutenberg regarding this, but I have to note that <br> is a self-closing element, so <br></br> is the same as <br><br> or </br></br>. So probably you get double spacing because of that, try using just one <br> at a time :)
Yup, try using only one. Just <br>
I am using Hugo which produces <br></br> but I tested with your example file and get the same result.
You get the same break as with paragraph when you use <br>?
See the attached screenshot.
I inserted a simple <br /> after "type."
I would expect the same linebreak as in normal paragraphs.
Are you looking to get the indented paragraph effect or just break the line without indentation?
a line break without indentation.
@juh2 I'll take a closer look this weekend. A <br> should only break the line...
@juh2 I'm looking into this and it seems that text<br>text will produce what you're looking for. <p>text</p><br>text will not. Each paragraph has a bottom margin that pushes content down. Using <br> inside a <p> still produces only a line break without margins. So everything seems normal.
No, in the sample which is provided with gutenberg I do this:
Inserting a <br> right before the sentence beginning with »Across...«.
<p>In Renaissance Europe, the arrival of mechanical movable type printing introduced the era of mass communication which permanently altered the structure of society. The relatively unrestricted circulation of information — including revolutionary ideas — transcended borders, captured the masses in the Reformation and threatened the power of political and religious authorities; the sharp increase in literacy broke the monopoly of the literate elite on education and learning and bolstered the emerging middle class. <br>Across Europe, the increasing cultural self-awareness of its people led to the rise of proto-nationalism, accelerated by the flowering of the European vernacular languages to the detriment of Latin's status as lingua franca. In the 19th century, the replacement of the hand-operated Gutenberg-style press by steam-powered rotary presses allowed printing on an industrial scale, while Western-style printing was adopted all over the world, becoming practically the sole medium for modern bulk printing.</p>And I get this:
`
I think I am using the default config:
`/* Configuration
========================================================================== */
$edit-mode: false; // [ true / false ] - Enables/disables the grid toggle button.
// Theme / Fonts
$theme: Merriweather; // [ Merriweather / OpenSans / custom ]
$custom-font-body: null !default; // [ "Libre Baskerville", Georgia, serif ]
$custom-font-headings: null !default;
// Paragraph indenting
$paragraph-indent: false; // [ true / false ]
// Base sizes
$base-font-size: 100 !default; // In %. Also used for mobile. Number only, no units.
$base-font-size-desktop: 112.5 !default; // In %. Used to calculate the desktop font size. Number only, no units.
$line-height: 1.625;
$line-height-desktop: 1.7;
$max-width: 35; // Number only, no units. Gets converted to REMs and pixels.
// Modular Scale
$modular-scale: (
xxxl: 4.3,
xxl: 3.5,
xl: 3,
l: 2.5,
m: 2,
s: 1.6875,
xs: 1.4375,
xxs: 1.2,
xxxs: 1,
xxxxs: .8125
) !default;
// Colors
$color-font-body: #222;
$color-font-headings: $color-font-body;
$color-font-light: #888;
$color-font-figcaption: $color-font-body;
/* Calculations
========================================================================== */
// Mobile base & leading
$base: 16 * ($base-font-size / 100);
$leading: round($base * $line-height);
$leading-rem: $leading / $base;
// Desktop base & leading
$base-desktop: 16 * ($base-font-size-desktop / 100);
$leading-desktop: round($base-desktop * $line-height-desktop);
$leading-rem-desktop: $leading-desktop / $base-desktop;
/* Font themes
========================================================================== */
$font-body: null;
$font-headings: null;
@if $theme == Merriweather {
// Import Merriweather
@import
url(https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic&subset=latin,latin-ext);
// Set body font
$font-body: Merriweather, Georgia, serif;
} @else if $theme == OpenSans {
// Import Open Sans
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic);
// Set body font
$font-body: Open Sans, Arial, Helvetica, Sans-serif;
}
@else if $theme == SourceSerif {
// Import Source Serif Pro
@import
url(https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,700,400italic);
// Set body font
$font-body: 'Source Serif Pro', Arial, Helvetica, Sans-serif;
} @else if $theme == custom {
// Set custom body font
$font-body: $custom-font-body;
// Set custom headings font
@if $custom-font-headings != $custom-font-body {
$font-headings: $custom-font-headings;
}
}
`
After investigating a little further I see that this might be a firefox issue. In Chrome and Vivaldi
behaves as expected. Only in firefox the spacing is too big.
@juh2 very interesting. I'll take a look a firefox as well.
I tried some recipes on the internet to style the
tag or to normalize the standard tags, but I nothing changed. I fear that normalize.css conflicts with the built in resets.
Have you made any progress?
@juh2 not at all... :( this is a tough one...
If it helps: There is no difference in the rendering of <br> in different browsers by default. So the issue must reside in the styles applied.
I'll check this out though.
Found it:
There is a difference in how browsers treat <br> indeed, but the mistake is in applying margins to everything:
// combined.min.css:1 @screen and (min-width: 40em)
* {
line-height: 1.72222rem;
margin-bottom: 1.72222rem;
max-width: 35rem;
margin-left: auto;
margin-right: auto;
}
// combined.min.css:1
* {
line-height: 1.625rem;
margin: 0px 0px 1.625rem;
}So there are two things to do:
- Don't apply margins to everything in that way.
- Just overwrite the margin for
<br>elements (probably the most feasible option)
I can open a PR for this.
Hey @jameskolce wow that was quick 🎯 Yeah let's go for number 2. Well done, thanks.
Thanks! @matejlatin So I fixed this but I'm having trouble building the project (I don't have Ruby and the grunt file is a little confusing). So I'll just commit the change in Sass and maybe you can compile it to CSS.
Also I was checking and I think the project can be improved a lot in terms of technical stuff, I really like it, so I might start working on it a little if that's okay!
Thanks a lot.
Hey @jameskolce thanks. Let me review this later and yeah... contributions are very welcome. Thanks for investing your time ;) I was looking at adding lynt and travis recently (as some issues here suggest) but didn't have time to dig deep enough.. I know there's a lot of room for improvement from the technical side.
Sure and okay cool! I might take a look at the other issues; maybe I can do something as well!
@juh2 this should be fixed with the latest release. Can you check please? Reopen the issue if not...