Horizontal offset not working

[Skaytacium]

Prerequisites

• I have read and understood the CONTRIBUTING guide
• I looked for duplicate issues before submitting this one

Description

Trying to horizontally offset any block, be it right or left aligned, vertically offset (which works) or not, doesn't work for me. I don't know if everyone can reproduce this though.

Old

So I wanted to make my own theme and got pretty far, but there were 2 problems that I encountered:

1. Blocks overflowing to the next line

   So when I added the battery_icon in the battery segment, the leading diamond of this segment would cut out and be invisible until I zoomed out really far.
   
   
   The way I fixed this is by removing the percentage sign, which worked and didn't overflow. I encountered the same issue for the Spotify segment, where it would overflow if I didn't use the default play/pause/stopped icons. This time, if I added a custom prefix, not only would it just cut out, but it would overflow to the next line, which impacted where I positioned my cursor. This leads us to issue 2.

2. Spotify detection

   oh-my-posh doesn't seem to be able to detect if Spotify has been paused or stopped on the non-windows store version. This makes the paused/stopped icons useless. I have not tried the windows store version as thoroughly as I have used the non-store one, so I will try that soon and see if anything changes.

Environment

• Oh my Posh version: 3.51.0
• Theme: Custom, the file is attached
• Operating System: Windows 20H2, 19042.685
• Shell: Powershell 7.1.0, but tried it with 6
• Terminal: Windows Terminal 1.4.3243.0
• Spotify version: Non-Windows Store, 1.1.48.625.g1c87c7f7

Steps to Reproduce

1. Try to horizontally offset a block

Old

1. Get my theme 2. Set prompt to use that theme 3. Play a song on Spotify 4. The last character on the Spotify block will overflow to the next line and paused/stopped won't work (on non-store)

Things I tried

• Adding a newline block.
• Trying to do it in segments.
• Changing versions.
• Using a different terminal (ConEmu)

Expected behavior: Blocks should offset properly depending on the value given

Actual behavior: They don't

Note: Other than that your prompt theming engine is no less than epic!

Edits

1. You can fix this by using different icons. From what I can see, oh-my-posh doesn't take into account the extra characters that are added by some symbols in nerd fonts. So that seems to be the problem and I'm 99% sure that the aforementioned reason is why it was glitching out.
2. Final theme which doesn't glitch out. Field-tested!
3. Issue Topic Changed

Working Theme

{
    "console_title": true,
    "final_space": true,
    "blocks": [{
            "type": "prompt",
            "alignment": "left",
            "segments": [{
                    "type": "os",
                    "style": "diamond",
                    "leading_diamond": "\ue0b2",
                    "foreground": "#42B8B8",
                    "background": "#665c54",
                    "properties": {
                        "prefix": "<#fe8019>\ue0b3</> ",
                        "postfix": " <#fe8019>\ue621</>",
                        "windows": "\uf17a"
                    }
                },
                {
                    "type": "shell",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "prefix": " \ufcb5 "
                    }
                },
                {
                    "type": "root",
                    "style": "plain",
                    "foreground": "#42B8B8",
                    "background": "#665c54",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> ",
                        "postfix": " <#fe8019>\ue621</>",
                        "root_icon": "\uf2dd"
                    }
                },
                {
                    "type": "path",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "style": "short"
                    }
                },
                {
                    "type": "node",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> \uf898 ",
                        "display_version": true
                    }
                },
                {
                    "type": "python",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> \ue235"
                    }
                },
                {
                    "type": "exit",
                    "style": "plain",
                    "foreground": "#42B8B8",
                    "background": "#665c54",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> ",
                        "postfix": " <#fe8019>\ue621</>",
                        "always_enabled": true
                    }
                },
                {
                    "type": "executiontime",
                    "style": "diamond",
                    "trailing_diamond": "\ue0b0",
                    "foreground": "lightYellow",
                    "background": "#504945",
                    "properties": {
                        "threshold": 0,
                        "always_enabled": true,
                        "postfix": " <#fe8019>\ue0b1</>"
                    }
                }
            ]
        },
        {
            "type": "prompt",
            "alignment": "right",
            "segments": [{
                    "type": "session",
                    "style": "diamond",
                    "leading_diamond": "\ue0b2",
                    "foreground": "lightYellow",
                    "background": "#504945",
                    "properties": {
                        "user_info_separator": " on ",
                        "prefix": "<#fe8019>\ue0b3</> "
                    }
                },
                {
                    "type": "time",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> ",
                        "time_format": "Mon Jan 2 15:04:05 MST 2006"
                    }
                },
                {
                    "type": "battery",
                    "style": "diamond",
                    "trailing_diamond": "\ue0b0",
                    "foreground": "#42B8B8",
                    "background": "#665c54",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> ",
                        "display_error": true,
                        "battery_icon": "\uf8ef",
                        "charging_icon": "\uf587 ",
                        "discharging_icon": "\uf57d ",
                        "charged_icon": "\uf578 ",
                        "display_charging": true,
                        "postfix": " <#fe8019>\ue0b1</>"
                    }
                }
            ]
        },
        {
            "type": "newline"
        },
        {
            "type": "prompt",
            "alignment": "left",
            "segments": [{
                "type": "git",
                "style": "diamond",
                "trailing_diamond": "\ue0b0",
                "leading_diamond": "\ue0b2",
                "foreground": "lightCyan",
                "background": "#504945",
                "properties": {
                    "prefix": "<#fe8019>\ue0b3</> ",
                    "postfix": " <#fe8019>\ue0b1</>",
                    "branch_icon": "\ufb2b ",
                    "display_stash_count": true,
                    "status_separator_icon": " <#fe8019>\ue621</>",
                    "local_working_icon": " \uf8ea",
                    "local_staged_icon": " \uf62b",
                    "stash_count_icon": "<#fe8019>\ue621</> \uf15b ",
                    "tag_icon": "\uf02b",
                    "merge_icon": "\ufb2c",
                    "display_upstream_icon": true,
                    "github_icon": "\uf408 ",
                    "git_icon": "\uf7a1 "
                }
            }]
        },
        {
            "type": "prompt",
            "alignment": "right",
            "segments": [{
                "type": "spotify",
                "style": "diamond",
                "trailing_diamond": "\ue0b0",
                "leading_diamond": "\ue0b2",
                "foreground": "lightCyan",
                "background": "#504945",
                "properties": {
                    "playing_icon": "<lightYellow>\uf144</> ",
                    "paused_icon": "<lightYellow>\uf28b</> ",
                    "stopped_icon": "<lightYellow>\uf28d</> ",
                    "track_separator": " <#fe8019>\ue621</> ",
                    "prefix": "<#fe8019>\ue0b3</> <#42B8B8>\uf1bc</> ",
                    "postfix": " <#fe8019>\ue0b1</>"
                }
            }]
        },
        {
            "type": "newline"
        },
        {
            "type": "prompt",
            "alignment": "left",
            "segments": [{
                "type": "text",
                "style": "diamond",
                "trailing_diamond": "\ue0b0",
                "leading_diamond": "\ue0b2",
                "foreground": "lightYellow",
                "background": "#665c54",
                "properties": {
                    "text": "sk",
                    "prefix": "<#fe8019>\ue0b3</>",
                    "postfix": "<#fe8019>\ue0b1</>"
                }
            }]
        }
    ]
}

Theme

{
    "console_title": true,
    "final_space": true,
    "blocks": [{
            "type": "prompt",
            "alignment": "left",
            "segments": [{
                    "type": "os",
                    "style": "diamond",
                    "leading_diamond": "\ue0b2",
                    "foreground": "#42B8B8",
                    "background": "#696969",
                    "properties": {
                        "prefix": "<#F1891B>\ue0b3</> ",
                        "windows": "\uf17a"
                    }
                },
                {
                    "type": "shell",
                    "style": "plain",
                    "foreground": "#42B8B8",
                    "background": "#696969",
                    "prefix": "|",
                    "properties": {
                        "prefix": "<#F1891B>\ue621</> \uFCB5 "
                    }
                },
                {
                    "type": "root",
                    "style": "plain",
                    "foreground": "#42B8B8",
                    "background": "#696969",
                    "properties": {
                        "prefix": "<#F1891B>\ue621</> ",
                        "root_icon": "\ue315"
                    }
                },
                {
                    "type": "path",
                    "style": "plain",
                    "foreground": "#42B8B8",
                    "background": "#696969",
                    "properties": {
                        "prefix": "<#F1891B>\ue621</> \ue5fe ",
                        "style": "short"
                    }
                },
                {
                    "type": "exit",
                    "style": "plain",
                    "foreground": "#42B8B8",
                    "background": "#696969",
                    "properties": {
                        "prefix": "<#F1891B>\ue621</> ",
                        "always_enabled": true
                    }
                },
                {
                    "type": "executiontime",
                    "style": "diamond",
                    "trailing_diamond": "\ue0b0",
                    "foreground": "#42B8B8",
                    "background": "#696969",
                    "properties": {
                        "prefix": "<#F1891B>\ue621</> ",
                        "threshold": 0,
                        "always_enabled": true,
                        "postfix": " <#F1891B>\ue0b1</>"
                    }
                }
            ]
        },
        {
            "type": "prompt",
            "alignment": "right",
            "segments": [{
                    "type": "session",
                    "style": "diamond",
                    "leading_diamond": "\ue0b2",
                    "foreground": "#42B8B8",
                    "background": "#696969",
                    "properties": {
                        "user_info_separator": " on ",
                        "prefix": "<#F1891B>\ue0b3</> "
                    }
                },
                {
                    "type": "time",
                    "style": "plain",
                    "foreground": "#42B8B8",
                    "background": "#696969",
                    "properties": {
                        "prefix": "<#F1891B>\ue621</> ",
                        "time_format": "Mon Jan 2 15:04:05 MST 2006"
                    }
                },
                {
                    "type": "battery",
                    "style": "diamond",
                    "trailing_diamond": "\ue0b0",
                    "foreground": "#42B8B8",
                    "background": "#696969",
                    "properties": {
                        "prefix": "<#F1891B>\ue621</> ",
                        "display_error": true,
                        "charging_icon": "\uf587 ",
                        "discharging_icon": "\uf57d ",
                        "charged_icon": "\uf578 ",
                        "display_charging": true,
                        "postfix": " <#F1891B>\ue0b1</>"
                    }
                }
            ]
        },
        {
            "type": "newline"
        },
        {
            "type": "prompt",
            "alignment": "left",
            "segments": [{
                "type": "git",
                "style": "diamond",
                "trailing_diamond": "\ue0b0",
                "leading_diamond": "\ue0b2",
                "foreground": "#42B8B8",
                "background": "#696969",
                "properties": {
                    "prefix": "<#F1891B>\ue0b3</> ",
                    "postfix": " <#F1891B>\ue0b1</>",
                    "branch_icon": "\ufb2b ",
                    "display_stash_count": true,
                    "status_separator_icon": " <#F1891B>\ue621</> ",
                    "local_working_icon": " \uf8ea",
                    "local_staged_icon": " \uf62b",
                    "stash_count_icon": "<#F1891B>\ue621</> \uf15b ",
                    "tag_icon": "\uf02b",
                    "merge_icon": "\ufb2c",
                    "display_upstream_icon": true,
                    "github_icon": "\uf408 ",
                    "git_icon": "\uf7a1 "
                }
            }]
        },
        {
            "type": "prompt",
            "alignment": "right",
            "segments": [{
                "type": "spotify",
                "style": "diamond",
                "trailing_diamond": "\ue0b0",
                "leading_diamond": "\ue0b2",
                "foreground": "#42B8B8",
                "background": "#696969",
                "properties": {
                    "playing_icon": "\uf90c ",
                    "paused_icon": "\uf8e5 ",
                    "stopped_icon": "\ufb66 ",
                    "track_separator": " <#F1891B>\ue621</> ",
                    "prefix": "<#F1891B>\ue0b3</> \uf1bc ",
                    "postfix": " <#F1891B>\ue0b1</>"
                }
            }]
        },
        {
            "type": "newline"
        },
        {
            "type": "prompt",
            "alignment": "left",
            "segments": [{
                "type": "text",
                "style": "diamond",
                "trailing_diamond": "\ue0b0",
                "leading_diamond": "\ue0b2",
                "foreground": "#42B8B8",
                "background": "#696969",
                "properties": {
                    "text": "sk",
                    "prefix": "<#F1891B>\ue0b3</>",
                    "postfix": "<#F1891B>\ue0b1</>"
                }
            }]
        }
    ]
}

[JanDeDobbeleer]

1. oh-my-posh doesn't take into account the extra characters that are added by some symbols in nerd fonts

Yes, that seems to be really hard to do. There's one function that calculates the length, maybe if you could give one that doesn't work, I can create a proper test for it. I did try this already a lot in the past, which is why the horizontal offset property was created on a segment as a workaround.

About Spotify, indeed on Windows it's impossible to get all the context. On MacOS we can query the status from the player, this is impossible on Windows.

[Skaytacium]

Hey! Thanks for that fast response. It's really nice seeing someone care a lot about their projects.

About Spotify, indeed on Windows it's impossible to get all the context. On macOS we can query the status from the player, this is impossible on Windows.

This makes sense, and in my opinion, that I think is very ignorable and should not be that much of an issue.

The main thing being the character width. Now I do not program in go, but if I could I would love to work on a PR. The horizontal offset property was the first thing that came to mind when I wanted to use those exotic symbols, but for some reason, it would never work. Vertical offset works just fine, but horizontal offset never seems to work. I tried everything that I mentioned above but to no luck.

I think if the horizontal offset would have worked, I would have never created this issue. So I might rename it to "Horizontal offset doesn't work".

One last question, is the offset for blocks or for segments? Because in the docs they are used interchangeably even though the offset is in the block properties segment, and you just said segment, so just want to clarify that.

Edit 1: Also, in the JSON schema, the property is in the block and not the segment. Confusing!

[JanDeDobbeleer]

It's on Block level! That's a mistake then. Did you try this on Segment or Block level?

[Skaytacium]

Block level, didn't seem to work. For now, I have just used some other icons. But it doesn't work on right or left alignment, vertical works fine though.

[JanDeDobbeleer]

Seems like this works on ZSH, but not Powershell. Will investigate.

[Skaytacium]

Hey, any updates on the issue? If you want, I could make a PR sometime next month

[JanDeDobbeleer]

It's on my list after I get a POC out that hopefully results in faster command execution on Windows. Shouldn't take a month!

[Skaytacium]

Great! Happy to hear that Windows will be faster. Command execution also depends on the terminal emulator though, but speed is always good.

[JanDeDobbeleer]

@Skaytacium from what I can see, this works on both MacOS and Windows in Powershell:

This is achieved by using the following property on a RIGHT aligned block. I didn't mention that specifically, but that's how it's coded right now, there's no way to offset a LEFT aligned block (not sure if that matters). See the second block and "horizontal_offset": -5,.

{
  "blocks": [
    {
      "type": "prompt",
      "alignment": "left",
      "segments": [
        {
          "type": "os",
          "style": "plain",
          "foreground": "#26C6DA",
          "background": "#546E7A",
          "properties": {
            "postfix": " \uE0B1"
          }
        },
        {
          "type": "root",
          "style": "plain",
          "foreground": "#26C6DA",
          "background": "#546E7A"
        },
        {
          "type": "path",
          "style": "plain",
          "foreground": "#26C6DA",
          "background": "#546E7A",
          "properties": {
            "style": "full",
            "postfix": " "
          }
        },
        {
          "type": "git",
          "style": "plain",
          "foreground": "#D4E157",
          "background": "#546E7A",
          "properties": {
            "prefix": "<#26C6DA>\uE0B1 </>"
          }
        },
        {
          "type": "text",
          "style": "plain",
          "foreground": "#546E7A",
          "background": "transparent",
          "properties": {
            "text": "\uE0B0",
            "prefix": "",
            "postfix": ""
          }
        }
      ]
    },
    {
      "type": "prompt",
      "alignment": "right",
      "horizontal_offset": -5,
      "segments": [
        {
          "type": "session",
          "style": "diamond",
          "foreground": "#D4E157",
          "background": "#546E7A",
          "leading_diamond": "\uE0B2",
          "properties": {
            "postfix": " <#26C6DA>\uE0B3</> "
          }
        },
        {
          "type": "time",
          "style": "plain",
          "foreground": "#D4E157",
          "background": "#546E7A",
          "properties": {
            "time_format": "15:04:05",
            "postfix": " \uF017 "
          }
        }
      ]
    },
    {
      "type": "newline"
    },
    {
      "type": "prompt",
      "alignment": "left",
      "segments": [
        {
          "type": "exit",
          "style": "plain",
          "foreground": "#D4E157",
          "properties": {
            "prefix": "\u276F",
            "always_enabled": true,
            "error_color": "#FF5252",
            "display_exit_code": false
          }
        }
      ]
    }
  ]
}

[Skaytacium]

Oh, that makes sense I guess. It seems to work fine with the right block, but a new problem arises:

I remember running into this before, but not really sure how I fixed it.

Edit: This goes away as soon as I take out the horizontal offset, weird

[JanDeDobbeleer]

That's a bug in Windows Terminal. I still need to log it. Has to do with icons and the space they take. For example, whenever I noticed this on Windows Terminal, the same issue didn't occur in the vscode terminal for example.