KosmosisDire / obsidian-webpage-export

Export html from single files, canvas pages, or whole vaults. Direct access to the exported HTML files allows you to publish your digital garden anywhere. Focuses on flexibility, features, and style parity.
https://docs.obsidianweb.net/
MIT License
693 stars 58 forks source link

[Bug]: Canvas text is pushed to the bottom when exported #420

Open WinnerWind opened 2 months ago

WinnerWind commented 2 months ago

What happened?

Text put in boxes in a canvas is pushed to the bottom when its exported. This is not the case when making the canvas in Obsidian.

Canvas when Exported

image

Canvas while editing

image

This makes every box have unnecessary top padding and makes small text boxes that fit while making it need scroll bars.

Reproduction

  1. Make a Canvas
  2. Put text in a box
  3. Export
  4. Text is bottom aligned.

Last Working Version

No response

Version

1.8.1-2b

Operating System

Arch Linux x86_64 using X11

Obsidian Version

current v1.5.12 installer v1.5.12

Which browsers can you reproduce this in?

Firefox

Relevant log output

Log:
[INFO]  Including stylesheet: css-settings-manager
[INFO]  Replacing "welcome!" header because it was H1 at the top of the page
[INFO]  Closing render window
[INFO]  Including stylesheet: css-settings-manager
[INFO]  Closing render window
[INFO]  Including stylesheet: css-settings-manager
[INFO]  Replacing "welcome!" header because it was H1 at the top of the page
[INFO]  Using "introduction" header as title because it was H1 at the top of the page
[INFO]  Replacing "contact me!" header because it was very similar to the file's title.
[INFO]  Closing render window
[INFO]  Including stylesheet: css-settings-manager
[INFO]  Replacing "welcome!" header because it was H1 at the top of the page
[INFO]  Using "introduction" header as title because it was H1 at the top of the page
[INFO]  Replacing "contact me!" header because it was very similar to the file's title.
[INFO]  Closing render window

Settings:
    settingsVersion ------------- 1.8.1-2b
    makeOfflineCompatible         false
    inlineAssets ---------------- false
    includePluginCSS              [
    includeSvelteCSS ------------ true
    titleProperty                 title
    customHeadContentPath -------
    faviconPath                   /mnt/windows/Users/Lenovo/DESKTOP/Desktop/Site/unnamed.jpg
    documentWidth --------------- 80em
    sidebarWidth                  20em
    minOutlineCollapse ---------- 2
    startOutlineCollapsed         true
    relativeOutlineLinks -------- false
    allowFoldingHeadings          true
    allowFoldingLists ----------- true
    allowResizingSidebars         true
    logLevel -------------------- warning
    minifyHTML                    true
    makeNamesWebStyle ----------- true
    onlyExportModified            false
    deleteOldFiles -------------- false
    addThemeToggle                true
    addOutline ------------------ true
    addFileNav                    true
    addSearchBar ---------------- true
    addGraphView                  true
    addTitle -------------------- true
    addRSSFeed                    true
    siteURL --------------------- https://winnerwind.github.io/
    authorName                    WinnerWind
    vaultTitle ------------------ My Site
    exportPreset                  website
    openAfterExport ------------- false
    graphAttractionForce          1
    graphLinkLength ------------- 10
    graphRepulsionForce           150
    graphCentralForce ----------- 3
    graphEdgePruning              89
    graphMinNodeSize ------------ 4
    graphMaxNodeSize              10
    showDefaultTreeIcons -------- false
    emojiStyle                    Native
    defaultFileIcon ------------- lucide//file
    defaultFolderIcon             lucide//folder
    defaultMediaIcon ------------ lucide//file-image
    exportPath                    /mnt/windows/Users/Lenovo/DESKTOP/Desktop/Site/winnerwind.github.io/
    filesToExport --------------- 5
    filePickerBlacklist           [
    filePickerWhitelist --------- [
    includeThemeToggle            true
    includeOutline -------------- true
    includeFileTree               true
    includeSearchBar ------------ true
    includeGraphView              false
    addFilenameTitle ------------ true
    inlineCSS                     false
    inlineJS -------------------- false
    inlineImages                  false
    sidebarsAlwaysCollapsible --- true
    customLineWidth              
    contentWidth ----------------
    incrementalExport             true
    deleteOldExportedFiles ------ false
    addDarkModeToggle             true

Enabled Plugins:
    Webpage HTML Export
    Style Settings
    Badges
    BRAT
    Kanban

Additional Info

No response

KosmosisDire commented 2 months ago

Hi, thanks for the report, I believe this will be fixed in the next release. Thank you!

cnschu commented 1 month ago

margin-block-start is 1em in the export, it should be 0 (as in the editor in obsidian. it seeems that this value is inherited from obsidian.css and should be intentionally set to 0.