Permlink Replies: 5 - Pages: 1 - Last Post: 6 Jun 21, 10:04 Last Post By: EnkiLee
EnkiLee

Posts: 12
Registered: 1-Dec-2013
Little typographic issue
Posted: 5 Jun 21, 10:08
  Click to reply to this thread Reply
The html-rendering in story has (IMHO) a little issue rendering an unsorted list (UL).

The UL is displayed correctly within the jAlbum-build-in HTML-Editor (find example atteched in file UL_html_editor.png). Here the distance between two lines is the same as inside a normal paragraph (P).

In browser it looks different (default story-settings): Here the spacing between to list-members is the same like between two P-elements. Maybe it's not an error, but it looks a little bit ugly (find the example attached UL_html_result.png).

I checked with the latest versions of Firefox and Edge on Windows 10.

It would be great if the UL in the rendered html-page would look like it looks in the build-in html-editor by default.

Best regards, /uwe
JeffTucker

Posts: 7,681
Registered: 31-Jan-2006
Re: Little typographic issue
Posted: 5 Jun 21, 13:07   in response to: EnkiLee in response to: EnkiLee
  Click to reply to this thread Reply
Just from screenshots, I can't tell where you're entering the unordered list. This is why we always ask for a link, instead of a screenshot - we can't diagnose a screenshot.

But I'm guessing you're entering this in the Album description. If so, the problem is that the skin is applying its own default styling to the list, probably because it uses lists for its menu items, where larger margins are needed. It's not expecting the user to be planting his own lists in there.

If my guess about what you're doing is correct, entering this under Story > Advanced > Custom code > CSS should fix it:
.description ul li {margin: 0;}
EnkiLee

Posts: 12
Registered: 1-Dec-2013
Re: Little typographic issue
Posted: 6 Jun 21, 08:35   in response to: JeffTucker in response to: JeffTucker
  Click to reply to this thread Reply
Meanwhile i have published the album, so i can provide the link:
https://glossmann.eu/Reisen_bildert/Sibirien/index.html
There is only one list on this page.

The list is part of an empty page, it's inside the description-part of the page (ob.htt).
I already integrated the CSS-line, but maybe it referes to the wrong element, it has no effect.

Best regards!
/uwe

Edited by: EnkiLee on 6 Jun 2021, 08:35

Edited by: EnkiLee on 6 Jun 2021, 08:38
Laza

Posts: 2,281
Registered: 6-Sep-2005
Re: Little typographic issue
Posted: 6 Jun 21, 08:55   in response to: EnkiLee in response to: EnkiLee
  Click to reply to this thread Reply
With UL's there are no strict rules. With multi-line list elements - which behave like a paragraph - it's best to apply the normal paragraph spacing: 1rem - 16px. However, when the list is made up of single lines 1rem is too much - it's better to use a half-line (8px) in this case. Leaving no space is typographically incorrect. The problem is the skin does not know in advance what the user will enter. Even the browsers and frameworks don't agree on what's the best.
JeffTucker

Posts: 7,681
Registered: 31-Jan-2006
Re: Little typographic issue
Posted: 6 Jun 21, 09:24   in response to: EnkiLee in response to: EnkiLee
  Click to reply to this thread Reply
EnkiLee wrote:
I already integrated the CSS-line, but maybe it referes to the wrong element, it has no effect.

Yes, that CSS would work only within a description. In this case, the list is elsewhere. Enter this, and experiment with the values to get the spacing you want:
.ob-page ul li {margin: 0.3rem 0;}
For more spacing, 0.4rem or 0.5rem, for example.
EnkiLee

Posts: 12
Registered: 1-Dec-2013
Re: Little typographic issue
Posted: 6 Jun 21, 10:04   in response to: JeffTucker in response to: JeffTucker
  Click to reply to this thread Reply
JeffTucker wrote:
Enter this, and experiment with the values to get the spacing you want:
.ob-page ul li {margin: 0.3rem 0;}
For more spacing, 0.4rem or 0.5rem, for example.

Ok, it seems that i understand the album's css-structure a little bit better. By this way i have better control over the rendering of any specific list. Thank you...

Laza wrote:
... Leaving no space is typographically incorrect. The problem is the skin does not know in advance what the user will enter. Even the browsers and frameworks don't agree on what's the best.
True.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums