Live Preview: Punctuation Marks after words that are bold/highlighted/math or after links gets pushed to next line

ReaderGuy42 · March 6, 2022, 12:06pm

This occurs in the Help Vault as well. When you’ve got Live Preview mode on, the punctuation marks (periods, commas, etc.) sometimes get pushed to the next line, if the word that is bold or highlit is at the end of the previous line.
Normally you’d expect the comma or period to be part of that previous line because there’s no space. I assume the live preview and the switching back and forth between showing the asterisks or equal signs mess with that.

Steps to reproduce

have word that is “modified” through bold or italics or highlighting
have that word at the end of a line, followed by a punctuation mark . or ,
see that that symbol gets pushed to the next line.
when you click on the word, the symbols (* or =) are shown and then the whole is usually moved to the next line.
when you click out of that word, those symbols disappear, and the word moves up a line, but the punctuation mark stays on that line.

Expected result

punctuation mark should remain with the previous word in previous line

Actual result

punctuation mark is on its own in the next line

Environment

Operating system: Linux Mint

Debug info:
SYSTEM INFO:
Obsidian version: v0.13.23
Installer version: v0.12.15
Operating system: #29~20.04.1-Ubuntu SMP Fri Jan 14 00:32:30 UTC 2022 5.13.0-27-generic
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Safe mode: on

RECOMMENDATIONS:
none

Additional information

sanhuesoft · March 1, 2022, 9:55pm

Steps to reproduce

Write a text that’s long enough so it breaks in multiple lines.
Put a comma in a word near the end of one line.
Set the comma’s preceding word to italics.

Expected result

The comma should appear in the first line, or move the word (in italics) and the comma to the following line.

Actual result

The comma appears alone in a new line, like this:

Environment

Operating system: Windows 11

Debug info:
SYSTEM INFO:
Obsidian version: v0.13.23
Installer version: v0.12.15
Operating system: Windows 10 Pro 10.0.22000
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: light
Community theme: none
Snippets enabled: 5
Safe mode: off
Plugins installed: 12
Plugins enabled: 10
1: Better Word Count
2: Tidy Footnotes
3: Footnote Shortcut
4: Icon Folder
5: Imgur Plugin
6: Citations
7: Minimal Theme Settings
8: Emoji Toolbar
9: Calendar
10: Day Planner

sanhuesoft · March 11, 2022, 11:55pm

I’ve noticed it also occurs when a bracket is followed by a math formula:

banool · March 31, 2022, 5:47pm

Seems to happen after code blocks too.

rdb78 · April 21, 2022, 1:37am

Steps to reproduce

Blaghaslkjdhfl kasjdhfl kajsdfhl ksjk adsdhjsfl kjshdfkl jshdf lkjsaflkjhksf  [smooth jazz cover](https://www.youtube.com/watch?v=JHjb-oN-IA8&ab_channel=036MALUKU),

Expected result

I expect the comma to stay with the link, but it is broken onto the next line, which starts with a comma.

This only happens if the link is external and it renders the box and arrow glyph after the link. Internal links are not affected.

Actual result

Screenshot:

Environment

Operating system:
OS X Catalina

Debug info:
SYSTEM INFO:
Obsidian version: v0.14.6
Installer version: v0.14.6
Operating system: Darwin Kernel Version 19.6.0: Tue Feb 15 21:39:11 PST 2022; root:xnu-6153.141.59~1/RELEASE_X86_64 19.6.0
Login status: logged in
Catalyst license: none
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Safe mode: off
Plugins installed: 1
Plugins enabled: 1
1: Obsidian Charts

RECOMMENDATIONS:
Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the help vault or disable community plugins.

Additional information

maximepigeon · August 13, 2022, 5:45pm

I haven’t tested it everywhere, but at first glance this css snippet seems to fix the issue:

.markdown-source-view.mod-cm6 img.cm-widgetBuffer  {
	display: none !important;
}

Calion · September 6, 2022, 1:12am

Steps to reproduce

Create an external hyperlink (not tested with internal links)
Put quotes around the link, like "[Obsidian](https://obsidian.md/)"
Write just enough text before the link so that the link drops to the next line.

Expected result

In reading and Source view, the leading quote mark drops down to the next line. In Live Preview, it does not. This is very annoying, because it leaves me assuming I left a space between the quote mark and the opening bracket.

Actual result

The quote mark is left orphaned on the previous line, like this:

Environment

Operating system: iPadOS

Debug info:

SYSTEM INFO:
Operating system: ios 15.6.1 (Apple iPad)
Obsidian version: 1.3.1 (67)
API version: v0.15.9
Login status: not logged in
Live preview: on
Legacy editor: off
Base theme: light
Community theme: none
Snippets enabled: 1
Restricted mode: on

RECOMMENDATIONS:
Custom theme: for cosmetic issues, please first try updating your theme to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.

Additional information

robertandrews · October 31, 2022, 11:37am

Steps to reproduce

Use:

Focusing is a higher-level function than [[Concentration|concentration]], but focusing on a particular task *requires* [[Concentration|concentration]].

Expected result

Output text ...function than concentration, should appear as seen. Punctuation character should always remained joined to the end of the preceding string. User should never include it inside the wikilink reference. Parsing system should consider concentration, part of the same entity for determining wrapping.

Actual result

When a comma follows a wikilink closure and the window width bumps up against it, it is wrongly wrapped to the next line and appears as an orphan.

Environment

Operating system: macOS 12.2.1
Obsidian: 1.0.0
Theme: Default

Debug info:

SYSTEM INFO:
	Obsidian version: v1.0.0
	Installer version: v0.15.9
	Operating system: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64 21.3.0
	Login status: logged in
	Catalyst license: insider
	Insider build toggle: on
	Live preview: on
	Legacy editor: off
	Base theme: light
	Community theme: none
	Snippets enabled: 2
	Restricted mode: off
	Plugins installed: 28
	Plugins enabled: 7
		1: Paste URL into selection v1.7.0
		2: Simple Embeds v1.12.0
		3: Linter v1.5.1
		4: Raindrop Highlights v0.0.14
		5: Tasks v1.15.0
		6: Obsidian42 - BRAT v0.6.35
		7: Natural Language Dates v0.6.1

RECOMMENDATIONS:
	Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.
	Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

Additional information

Klaas · October 31, 2022, 3:39pm

Yes, it does indeed. Many thanks.

system · December 6, 2022, 3:14pm

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

eike · February 23, 2023, 12:26pm

This does not seem to fix the issue between inline math and punctuation. E.g., I get a line break between “$A$” and a subsequent closing parenthesis (with no space between them).

pippinbarr · May 25, 2023, 3:41pm

Also this just seems worth fixing in general? Can the snippet be incorporated into releases or similar rather than us individually adding it?

(Aussi ça marche et merci Maxime! Je sais un Maxime qui a pris le M.Des. à Concordia - c’est pas toi, non?)

2fifty6 · January 2, 2024, 5:59pm

Can confirm this behavior still occurs in v1.5.3 in sandbox vault.

fish · January 8, 2024, 9:52pm

I’m also seeing periods wrapping to a new line when immediately after an inline code snippet

The css snippet up thread makes code blocks render at a shorter height in addition to fixing the text wrap issue. On long code blocks, the language overlaps with the code.

Without Snippet:

With Snippet:

another · January 10, 2024, 8:10am

Steps to reproduce

In the vault sandbox, type a short sentence that ends in italicized words, *like this*. The period at the end of the sentence should not be italicized. Now pad the start of the line with additional characters and/or resize the window until the line starts to wrap. Under certain spacing conditions, the period will wrap onto its own line, leaving it orphaned from the final words in the sentence.

Did you follow the troubleshooting guide? [Y/N]

Yes! I searched around and can’t seem to find an existing report for this.

Expected result

The period should “keep” with the words that preceded it, regardless of punctuation. In fact, if you switch to reading mode, the sentence will wrap correctly – but the presence of the hidden asterisk between the final word and the period in Live Preview seems to cause this unsightly form of wrapping to be possible.

live preview:

reading mode:

Actual result

The period will be “orphaned” onto its own line, something that most word processing software and most rich text editors prevent.

Environment

SYSTEM INFO:
	Obsidian version: v1.5.3
	Installer version: v1.5.3
	Operating system: #40~22.04.1-Ubuntu
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

vanadium · January 10, 2024, 9:09am

I can reproduce this on Fedora 39 with the v1.5.3 appimage. This happens in edit mode only: in reading mode, the wrapping occurs correctly.

astra · July 31, 2024, 6:22pm

This fixed it for me.

.math.math-inline,
.math {
  white-space: nowrap;
}

mythologies · September 6, 2024, 12:01pm

Can reproduce this on 1.7.1.

Punctuation marks often get carried on their own to the next line, while brackets get left behind in the preceding line. I noticed this happens when there are links in play.

Here’s an example:

Reading mode renders this fine:

Text from my example:

Example text is here just typing anything, example text is here just typing anything. ([[Link]] is here, bracket is left behind). Now for another example, II will type link [[at the end]].

RankkaApina · September 10, 2024, 6:08pm

Your solution

 .markdown-source-view.mod-cm6   {
	display: none !important;
}

sort of worked for me, but it broke my code blocks, so it wasn’t really a solution. What seems to work (I haven’t done extensive testing):

.markdown-source-view.mod-cm6 .cm-line > * + img.cm-widgetBuffer{
  display: none !important;
}

At least it fixes the instances I have easily available and my code blocks are still ok. For math, even though it has this property, it didn’t help, so I added the solution from above:

.math.math-inline,
.math {
  white-space: nowrap;
}

Right now, I can’t see any issues (although I’ve might’ve msised a use case).