Skip to content

Commit 3b5ae16

Browse files
authored
v0.0.1: Actually done
1 parent 96bb171 commit 3b5ae16

17 files changed

+412
-2047
lines changed

.editorconfig

Lines changed: 0 additions & 10 deletions
This file was deleted.

.eslintignore

Lines changed: 0 additions & 3 deletions
This file was deleted.

.eslintrc

Lines changed: 0 additions & 23 deletions
This file was deleted.

.gitignore

Lines changed: 0 additions & 22 deletions
This file was deleted.

.npmrc

Lines changed: 0 additions & 1 deletion
This file was deleted.

README.md

Lines changed: 63 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,109 @@
11
# Obsidian Simple Columns
2-
Easily display your notes side-by-side using a simple tag syntax.
2+
Display your text side-by-side with a simple syntax.
33

4-
## Example
5-
```markdown
6-
## Text outside of columns
7-
This is text coming before a column block. It will take up the full width of the page, like it usually does.
4+
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.
85

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

13-
[col]
14-
- Second column
15-
- This is text that is being displayed in the middle.
11+
## Overview
12+
```md
13+
...
14+
15+
[begin]
16+
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.
1617

1718
[col]
18-
This is the third column. It is displayed on the right.
19-
You can add as many columns as possible.
19+
_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").
2020

2121
[end]
2222

23-
This text is outside of the columns blocks. It will take up the full page width again.
23+
...
2424
```
2525

26-
## Syntax
27-
28-
### Flexible amount of blocks
29-
You can arrange more and more columns by adding more `[col]` tags between `[begin]` and `[end]` as well as making multiple blocks:
30-
31-
```markdown
32-
outside
33-
34-
[begin]
35-
column one
36-
37-
[col]
38-
column two
39-
40-
[end]
26+
![screenshot](example_1.png)
4127

42-
outside
28+
- Between `[begin]` and `[end]` should be the text you want to be displayed in columns.
29+
- Everything before `[begin]` and after `[end]` is processed normally.
30+
- A `[col]` between your paragraphs marks the end of a column and the start of a new one.
31+
- You can write as many `[col]` tags as you like, as long as they are between `[begin]` and `[end]`.
32+
- 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.
4333

34+
## RTL arrangement
35+
```md
4436
[begin]
37+
## First block
4538

4639
[col]
47-
column one
40+
## Second block
4841

4942
[col]
50-
column two
43+
## Third block
5144

52-
[end]
45+
[end] rtl
5346
```
5447

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

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

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

54+
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.*
55+
56+
## Wrap columns
57+
```md
6358
[begin]
64-
this text takes up the first quarter
59+
## 1st long text ...
6560

6661
[col]
67-
this text takes up the second quarter
62+
## 2nd long text ...
6863

69-
[end]
64+
[col]
65+
## 3rd long text ...
7066

7167
[col]
72-
this text takes up the second half
68+
## 4th long text ...
7369

74-
[end]
70+
[col]
71+
...
72+
73+
[end] wrap
7574
```
7675

77-
### Custom width ratio
78-
Some columns can take up more space that the others. Just add a number after a tag:
76+
![screenshot](example_3.png)
77+
78+
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%.
7979

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

82+
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.*
83+
84+
## Resize columns
85+
```md
8386
[begin]
84-
first column
87+
column with normal width
8588

86-
[col]2
87-
second column with twice as much space as the others
89+
[col] 2
90+
column twice as wide
8891

89-
[col]
90-
third column
92+
[col] 3
93+
column thrice as wide, like really wide
9194

9295
[end]
9396
```
9497

95-
### Arrange blocks Right-to-Left
96-
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:
98+
![screenshot](example_4.png)
9799

98-
```markdown
99-
[begin]2
100-
- first column
101-
- on the right
100+
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.
102101

103-
[col]
104-
- second column
105-
- on the left
106-
107-
[end]rl
102+
## Exclude mobile devices from rendering
103+
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.
108104

109-
outside text
110-
111-
[begin]
112-
- first column
113-
- on the left
105+
This is useful if you access a synced vault from the desktop on narrow screens.
114106

115-
[col]3
116-
- second column
117-
- on the right
118-
119-
[end]lr
120-
121-
[begin]
122-
- first column
123-
- uses setting value
124-
125-
[col]
126-
- second column
127-
- uses setting value
128-
129-
[end]
130-
```
107+
# Coming soon (eventually)
108+
- Apply columns in exported PDFs (right now they look like the normal document)
109+
- delete unnecessary elements from the DOM (technical issue, no change in user experience)

esbuild.config.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const context = await esbuild.context({
1515
banner: {
1616
js: banner,
1717
},
18-
entryPoints: ["src/main.ts"],
18+
entryPoints: ["main.ts"],
1919
bundle: true,
2020
external: [
2121
"obsidian",

0 commit comments

Comments
 (0)