Skip to content

Commit

Permalink
v0.0.1: Actually done
Browse files Browse the repository at this point in the history
  • Loading branch information
hiimsergey authored Jun 26, 2024
1 parent 96bb171 commit 3b5ae16
Show file tree
Hide file tree
Showing 17 changed files with 412 additions and 2,047 deletions.
10 changes: 0 additions & 10 deletions .editorconfig

This file was deleted.

3 changes: 0 additions & 3 deletions .eslintignore

This file was deleted.

23 changes: 0 additions & 23 deletions .eslintrc

This file was deleted.

22 changes: 0 additions & 22 deletions .gitignore

This file was deleted.

1 change: 0 additions & 1 deletion .npmrc

This file was deleted.

147 changes: 63 additions & 84 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,130 +1,109 @@
# Obsidian Simple Columns
Easily display your notes side-by-side using a simple tag syntax.
Display your text side-by-side with a simple syntax.

## Example
```markdown
## Text outside of columns
This is text coming before a column block. It will take up the full width of the page, like it usually does.
This plugin provides a way to structure your notes into columns that can be displayed horizontally in both directions with custom width ratios in the Reading View.

[begin]
## First column
This is text that is being displayed on the left.
## Installation
1. Download the archive from [Releases](https://github.com/hiimsergey/obsidian-simple-columns/releases/latest) and extract it to `path/to/vault/.obsidian/plugins/`.
2. Restart Obsidian.
3. Enable it under **Settings > Community Plugins > Simple Columns**.

[col]
- Second column
- This is text that is being displayed in the middle.
## Overview
```md
...

[begin]
In publishing and graphic design, _**Lorem ipsum**_ (/ˌlɔː.rəm ˈɪp.səm/) is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. _Lorem ipsum_ may be used as a placeholder before the final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design.

[col]
This is the third column. It is displayed on the right.
You can add as many columns as possible.
_Lorem ipsum_ is typically a corrupted version of _De finibus bonorum et malorum_, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin. The first two words themselves are a truncation of _dolorem ipsum_ ("pain itself").

[end]

This text is outside of the columns blocks. It will take up the full page width again.
...
```

## Syntax

### Flexible amount of blocks
You can arrange more and more columns by adding more `[col]` tags between `[begin]` and `[end]` as well as making multiple blocks:

```markdown
outside

[begin]
column one

[col]
column two

[end]
![screenshot](example_1.png)

outside
- Between `[begin]` and `[end]` should be the text you want to be displayed in columns.
- Everything before `[begin]` and after `[end]` is processed normally.
- A `[col]` between your paragraphs marks the end of a column and the start of a new one.
- You can write as many `[col]` tags as you like, as long as they are between `[begin]` and `[end]`.
- You can write as many `[begin]` and `[end]` blocks in your note, as long as you follow these syntax rules, otherwise the note won't be processed correctly.

## RTL arrangement
```md
[begin]
## First block

[col]
column one
## Second block

[col]
column two
## Third block

[end]
[end] rtl
```

You can also declare blocks in other blocks for further division:
![screenshot](example_2.png)

```markdown
this text takes up the whole width
By appending `rtl` to the `[end]` tag of your block, the columns will be put side-by-side in reversed order.

[begin]
this text takes up the first half
This is useful if your language is written right-to-left.

You can configure to have blocks processed like that by default by enabling the **RTL by default** setting. To process the blocks left-to-right, simply write `ltr` after the `[end]` tag. *Note: The setting will come into effect after switching into Reading View again.*

## Wrap columns
```md
[begin]
this text takes up the first quarter
## 1st long text ...

[col]
this text takes up the second quarter
## 2nd long text ...

[end]
[col]
## 3rd long text ...

[col]
this text takes up the second half
## 4th long text ...

[end]
[col]
...

[end] wrap
```

### Custom width ratio
Some columns can take up more space that the others. Just add a number after a tag:
![screenshot](example_3.png)

By appending `wrap` to the `[end]` tag of your block, the columns won't be strictly displayed on one level and can wrap over to the next one if you have too many blocks. Their individual widths won't sink below 40%.

```markdown
These columns will have a width ratio of 1:2:1.
That way you don't have to write countless `[begin]`-`[end]`-pairs if you want to write your text in a kind of grid.

You can make this the default behavior by enabling the **Wrap blocks by default** setting. *Note: The setting will come into effect after switching into Reading View again.*

## Resize columns
```md
[begin]
first column
column with normal width

[col]2
second column with twice as much space as the others
[col] 2
column twice as wide

[col]
third column
[col] 3
column thrice as wide, like really wide

[end]
```

### Arrange blocks Right-to-Left
By default the first column starts on the left and new ones appear on the right. There is a **Default column arrangement** setting but you can also set it for each block individually. Add a keyword at the end of the `[col]` tag:
![screenshot](example_4.png)

```markdown
[begin]2
- first column
- on the right
By appending a number to a `[begin]` or `[col]` tag, you set the width ratio of your blocks. The three blocks in the example above will be processed with the width ratio of 1:2:3.

[col]
- second column
- on the left

[end]rl
## Exclude mobile devices from rendering
You can prevent block rendering on mobile devices by disabling the **Render blocks on mobile** setting. That way, the `[begin]`, `[col]` and `[end]` tags will disappear from Reading View, but the text won't be shown side-by-side.

outside text

[begin]
- first column
- on the left
This is useful if you access a synced vault from the desktop on narrow screens.

[col]3
- second column
- on the right

[end]lr

[begin]
- first column
- uses setting value

[col]
- second column
- uses setting value

[end]
```
# Coming soon (eventually)
- Apply columns in exported PDFs (right now they look like the normal document)
- delete unnecessary elements from the DOM (technical issue, no change in user experience)
2 changes: 1 addition & 1 deletion esbuild.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const context = await esbuild.context({
banner: {
js: banner,
},
entryPoints: ["src/main.ts"],
entryPoints: ["main.ts"],
bundle: true,
external: [
"obsidian",
Expand Down
Loading

0 comments on commit 3b5ae16

Please sign in to comment.