Indented Headings

You’re example above (bear as it is right now, without identation) is still the most elegant solution.

1 Like

I agree with all those that believe Bear got it right the first time. As another option for small (touch) screens, you could hide the gutter by default, but make it readily accessible via a drag gesture. The usefulness of the old icons cannot be emphasized enough, when you are dealing with a large document with more than 3 levels of headers… and you are trying to verify/resolve incorrect header levels.

3 Likes

A quick search of r/bearapp shows many requests for indentation of ordered and unordered lists (so yay!) but only a few requests for wider lines on iPhones, most of which are couched as frustration that the line width slider on the Mac and iPad isn’t present on the iPhone.

I know that what seems to be a simple change might be very hard to code, but…

Why not keep the “hanging headers” on all devices (Mac, iPad and iPhone) but have the line width slider go “up to 11”?

If the line width is increased all the way to the edge of the screen, on any device, then—and only then—indent the headers as in Panda?

This should satisfy all the people who like the headers as in Bear at present, and also the people wanting as wide a line as possible.

1 Like

I think you should allow for auto-numbering headers. I understand that this is not a feature everybody wants all the time, but when one needs it (with longer notes and text), it’s really a game changer.

Also, the readibility between #, ## and ### is not great as of now

I’d like to see a way to hide all markup indicators. I don’t need an icon to see that a heading is a heading. It looks like a heading therefore it is a heading. If seems that if you added a function to hide/toggle markup indicators that would probably satisfy most people.

1 Like

I agree entirely. Well said.

What if the icon is hidden initially but then unhides if the cursor is on the same line as the Header? As soon has you move the cursor off of the header, it hides again. Maybe you could also hide/unhide the Header icon depending if the mouse is hovered over the Header text or not.

I don’t know, just a thought. Cheers!

1 Like

Agree with everyone else: very happy that lists are now indented in panda; prefer the outdented header icon in current bear.

I like the suggestion to auto-hide header icons unless the mouse hovers over the line or if the cursor is on the line.

Also like the suggestion to make sections draggable instead of just the header line.

Would also suggest (feature request) that sections be foldable as well as draggable.

1 Like

It also allows linking to headers (syntax looks like bear://x-callback-url/open-note?id={UUID}&header={headername}

I think, as with any other markdown syntax, it’d be a shame to hide the header icons.

I think the only alternative that gives the level of clarity that the current release’s icon has while making itself more distinct from the content of the header would be actually putting in every hash symbol, and I don’t think that’s a good compromise. In the color schemes I use, I think it scans quite easily; but perhaps some kind of more-stylized icon that is still representing H(1,2,3…) would be a stronger fit? An “H” that is somehow distinct from any of the Bear-supported fonts?

I think this is probably a strong compromise, though I think the inconsistency between devices might be a trade-off. Without having Panda for iOS, I think I’d personally prefer guttered headers on iPhone to stay.

Thanks for all the great work on Bear. Really appreciated.

I agree that headings should align with the rest of the text and that the header icon can move outside of the I understand the choice to indent headers on smaller screens. For iPad en macOS please make them align with the rest of the paragraphs. I like the heading icons because they’re not a character they don’t distract in your reading flow.

But as a typographer I have another wish.
Currently the editor formats quotes, lists and tasks like this:
Slightly indented and not consequential it seems.


I would like to suggest that quotes, lists, tasks and headers align with the other text like this:


All elements align with the paragraphs and indented bulleted and numbered lists align with the first character of the parent list item.

And it would be great if all spaces between element and text are the same. So the space between quote indicator and quote is optically as big as the space from bullet to bullet text.

It gives much more peace of mind and eyes :slightly_smiling_face:
Thanks for considering.

5 Likes

Really nice mock-up!

I personally like something in between; I like exactly what your mock-up has for the handling of quoted text, though a few elements are just a bit farther left than I personally prefer. The checkbox in the original image is the best element in terms of alignment IMO; maybe centering other elements to its center point instead of aligning based on left-most point?

1 Like

Your mockup is my ultimate dream for Bear. It is simple and clean. The way the current release is aligned would actually change my writing behavior. I hate the way the headers and body text aren’t aligned so I would opt for lists instead of paragraph text (especially after a header) just to avoid that distraction. Your mock up, however, is my perfection.

1 Like

I mostly use Bear on macOS, and only as a reference or quick note tool on iOS, so the header icon in the gutter on macOS (much preferred) and indented on iOS seems like a great compromise.

1 Like

Hello there!

Thank you for taking the time to create a visual for your typography feedback, this has inspired me to share how we do approach it -> New Editor Typography

I can see were you coming from, but there are a couple of details that doesn’t convince me completely:

  1. spacing of list is non consistent, the beginning of the text of list/unodered list/checkboxes is no longer aligned.
  2. two digits numbered list item will offset the text even more

Please check what we’re doing and if that make sense for you :slight_smile:

Hi @matteo,

Thanks for your post about Panda Typography that clarifies your considerations and I think they make a lot of sense. It looks like the best of both worlds. Flexibility in choice on typeface and consistency in the alignment.
Left side alignment is more aesthetic but I didn’t think through the effect that a different typeface and double digit’s would have. The alignment of checkbox and bullet lists I overlooked.

I have one more thing. I find the checkboxes quite big. It draws a lot of attention.
I would be curious to see if how it works if they are a bit smaller.

They way you’ve described it in the New Editor Typography is perfect, with the header indicator in the gutter, and the rest aligned as in the example. Well done! Can’t wait to be using this on a daily basis in Bear.

+1. Header indicators definitely need to go into the gutter. They totally break the flow of text as they are now and presentation is extremely important. I’ll back this up with one of my favourite quotes about typography and why we have it:

Ty­pog­ra­phy can re­in­force your key points. Ty­pog­ra­phy can ex­tend reader at­ten­tion. When you ig­nore ty­pog­ra­phy, you’re ig­nor­ing an op­por­tu­nity to im­prove the ef­fec­tive­ness of your writing.

—Matthew Butterick (Practical Typography)

honestly- the heading icons look great the way they are in panda . perhaps indent into gutter like u said in recent update but the icons don’t need to change.

Hello everyone!

The last update moved the header’s icons back into the gutter -> Panda release notes 1.0(532) - Markdown Hiding and Headers

Let us know how do you feel about it :slight_smile:

Best.

8 Likes

Excellent! Thank you.

2 Likes