Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vertical text alignment within the column[FR] #71

Open
AucklandIO opened this issue Jul 5, 2024 · 0 comments
Open

Vertical text alignment within the column[FR] #71

AucklandIO opened this issue Jul 5, 2024 · 0 comments
Assignees
Labels
enhancement New feature or request Feature Request

Comments

@AucklandIO
Copy link

AucklandIO commented Jul 5, 2024

Feature Request

In addition to the horizontal text alignment within a column, I would like vertical text positioning within a column as well.

Details / Ideas / Implementation

I would like to centre the text between both horizontal and vertical constraints within a column. Specifically, I would like to specify auto centring both vertically and horizontally, set specific pixel/em spacing designations, and top/bottom alignment (in the same way as we can start/centre/end align along the horizontal axis).

Specific use example:
When creating UI elements from the Columns plugin, I would like to centre the text in the following image:

image

Here is the current code I am using to create this element (/* delineated comments are obviously removed from my vault code as col codeblocks don't recognize them as comment elements):

``````col
>[!blank-container]
/* Empty container to change the styling from the enclosed callout, to one where the title is overlaid
>`````col-md
>>[!example] Navigation
/* Navigation Callout styling with title overlay
>>````col
/* col element for grouping the [!blank-container] elements within the 
>>```col-md
/* individual first col-md element 
>>textAlign=center
>>flexGrow=0.75
>>===
>>>[!blank-container|txt-l]
/* [!blank-container] element to show link
>>[[General/Journal/Daily/<%tp.date.now("[Daily Journal] YYYY-MM-DD",-1,tp.file.title,"YYYY-MM-DD")%>| ⬅️ Yesterday]]
>>```
>>```col-md
/* individual second col-md element
>>textAlign=center
>>flexGrow=2
>>===
>>>[!blank-container|txt-c]
/* [!blank-container] element to show link
>>[[General/Journal/Weekly/<%moment(tp.file.title).format("[Weekly Review] GGGG-[W]W")%>| - Weekly Review - ]]
>>```
>>```col-md
/* individual third col-md element
>>textAlign=end
>>flexGrow=0.75
>>===
>>>[!blank-container|txt-r]
/* [!blank-container] element to show link
>>[[General/Journal/Daily/<%tp.date.now("[Daily Journal] YYYY-MM-DD",tp.file.title,"YYYY-MM-DD")%>|Tomorrow ➡️]]
>>```
>>````
>````` 

The text should be lower (centred to the [!blank-container] column element they reside within. I don't know how to do this otherwise.

Additional Reference:
Callout Styling Without Overlay:
image

Callout Styling With Overlay:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request Feature Request
Projects
None yet
Development

No branches or pull requests

2 participants