# How to style overlapping inline decorations
**URL:** https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162
**Category:** Uncategorized
**Created:** [September 18, 2020, 3:28pm UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162 "2020-09-18T15:28:11Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@ronnyroeller](https://discuss.prosemirror.net/u/ronnyroeller)
#### Post date: [September 18, 2020, 3:28pm UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/1 "2020-09-18T15:28:11Z")
The [Prosemirror Edit Example](https://prosemirror.net/examples/collab/#edit-Example) allows to add comments. These comments can be overlapping.
For example, here are two overlapping comments - one on the whole content and the other only on the word “sample”:
Unfortunately, the uni-color yellow background doesn’t visualize that there are two overlapping comments. I’d like instead the background to indicate that there multiple overlapping comments, somewhat along these lines:
In the [sample source code](https://github.com/ProseMirror/website/blob/52efa7149ca2a3ca05955030f54e9bd8b70e2169/src/collab/client/comment.js#L13), each comment is converted into an inline decoration with styling information (CSS class). Prosemirror seems to automatically create then 3 decoration segments in the DOM: "is a ", “sample”, and “text”. So, the splitting is happening after providing the styling information.
One solution I could think of is to do the splitting into 3 segments in my code, and then directly create then 3 non-overlapping decorations with the right color.
Yet, as Prosemirror seems to have already logic for creating the segments, I was wondering if there is an easier solution to create styling based for these overlapping inline decorations.
---
### Author:  [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [September 18, 2020, 7:10pm UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/2 "2020-09-18T19:10:43Z")
> [@ronnyroeller](#):
>
> Yet, as Prosemirror seems to have already logic for creating the segments, I was wondering if there is an easier solution to create styling based for these overlapping inline decorations.
Nope, there’s nothing like that, so if you want this, you’ll have to compute the styles yourself.
---
### Author:  [@ronnyroeller](https://discuss.prosemirror.net/u/ronnyroeller)
#### Post date: [September 18, 2020, 7:43pm UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/3 "2020-09-18T19:43:12Z")
Thanks a lot for your quick answer, Marijn!
---
### Author:  [@ronnyroeller](https://discuss.prosemirror.net/u/ronnyroeller)
#### Post date: [September 23, 2020, 10:48am UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/4 "2020-09-23T10:48:13Z")
In case somebody runs into the same challenge, here is an implementation to create non-overlapping segments based on overlapping annotations: [https://github.com/remirror/remirror/blob/next/packages/%40remirror/extension-annotation/src/segments.ts](https://github.com/remirror/remirror/blob/next/packages/%40remirror/extension-annotation/src/segments.ts)
---
### Author:  [@vivaxy](https://discuss.prosemirror.net/u/vivaxy)
#### Post date: [September 29, 2021, 8:36am UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/5 "2021-09-29T08:36:32Z")
@marijn @ronnyroellerI found out a simple way to achieve this. Adding a `nodeName` will make decorations render like marks.
```auto
- Decoration.inline(from, to, { ...attrs }, spec);
+ Decoration.inline(from, to, { ...attrs, nodeName: 'span' }, spec);
```
DOM when decoration without `nodeName`:
```auto
is a
sample
text
```
DOM when decoration with `nodeName`:
```auto
is a
sample
text
```
I’m not sure that `nodeName` is design to do so. But it works.
---
### Author:  [@nbaschez](https://discuss.prosemirror.net/u/nbaschez)
#### Post date: [December 28, 2022, 6:27pm UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/6 "2022-12-28T18:27:43Z")
I’m about to implement something similar. Since it’s been a couple years now, I’m curious to hear if this approach worked well for you, or if you ran into any limitations of it?
Thanks! 🙏
---
### Author:  [@ronnyroeller](https://discuss.prosemirror.net/u/ronnyroeller)
#### Post date: [December 29, 2022, 11:31am UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/7 "2022-12-29T11:31:56Z")
> I’m curious to hear if this approach worked well for you, or if you ran into any limitations of it?
The above approach for coloring worked very well. Modeling this as an external data structure (annotations) turned out to be not ideal…
Here is a full writeup of our learnings: [Prosemirror: Highlights & Comments | by Ronny Roeller | NEXT Engineering | Medium](https://medium.com/collaborne-engineering/prosemirror-highlights-comments-20ce820149ed)
---
### Author:  [@nbaschez](https://discuss.prosemirror.net/u/nbaschez)
#### Post date: [December 30, 2022, 12:00am UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/8 "2022-12-30T00:00:04Z")
Extremely helpful, thank you!! I was leaning towards using marks instead of decorations, for the same reasons (I’m also using YJS), but this sealed the deal.
---
### Author:  [@shilpa](https://discuss.prosemirror.net/u/shilpa)
#### Post date: [July 11, 2023, 12:39pm UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/9 "2023-07-11T12:39:45Z")
What is the value of spec . How to define that?
---
### Author:  [@annabialas](https://discuss.prosemirror.net/u/annabialas)
#### Post date: [March 26, 2026, 6:51pm UTC](https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162/10 "2026-03-26T18:51:47Z")
Curious to understand how / why this works.