옵시디언 노트 글 너비 100% 만들기 - 읽기 쉬운 행 길이(Readable line length) 설정을 특정 페이지만 사용 안하도록(기본과 미니멀 테마 둘 다에 적용)

이전 글(Obsidian 노트 글 너비를 100%로 만들기 (full-width))과는 다르게

읽기 쉬운 행 길이(Readable line length) 설정을 하여 줄 길이를 제한해서 쓸 때
특정한 페이지만 되돌리는 방법입니다.

기본 테마에 설정된 100% 너비를 쓰도록 했습니다. 

 

Default와 Minimal 테마의 "편집 보기"와 "읽기 보기" 모두에서 되도록 했습니다.

 

https://docs.google.com/presentation/d/1LkDZ9H5ltQER7nCvd2h5SePVa4hoB4nMsSj_35FOsJQ/edit?usp=sharing 

 

설정하기

다음 두 가지만 설정하면 됩니다.

1. 노트의 frontmatter에 cssclass 항목 추가

cssclass: width-100

2. "Settings ＞ Appearance ＞ CSS Snippets"에 설정

다음 코드를 my_style.css에 추가합니다.

 

 

my_style.css 대신에 자신이 지금 쓰고 있는 파일(css)에 넣어도 됩니다.

다른 클래스 이름을 쓰려면 "width-100"을 모두 바꾸어 주면 됩니다.

 

 

참고

제가 위 코드를 만들 때 살펴본 내용입니다.

 

Developer Tools에서 탭 안의 노트 구조를  살펴보니 다음과 같습니다.

<div class="view-content"> 
  <div class="markdown-source-view"> ( ☜ Editing View, cssclass가 들어가는 곳 )
    <div class="cm-editor"> 
      <div class="cm-scroller"> 
        <div class="cm-sizer"> 
          <div class="inline-title"> 
          <div class="cm-contentContainer"> 
            <div class="cm-content"> 
              <div class="cm-line"> ( ☜ 노트의 한 줄에 해당한다.  여기에서 Live Preview / Source Mode에 따라 내용이 바뀐다.)
              <div class="cm-line">  
  <div class="markdown-reading-view"> ( ☜ Reading View )
    <div class="markdown-preview-view"> ( ☜ cssclass가 들어가는 곳 )
      <div class="markdown-preview-sizer markdown-preview-section"> 
        <div class="data-tag-name="h2" class="h2" data-heading="My Heading 2">  ( ☜ 헤딩 )
          <h2>
        <div class="data-tag-name="p" class="el-p">  ( ☜ 일반 줄 )
          <p>
        <div class="data-tag-name="pre" class="el-pre code-block-wrap">  ( ☜ 코드 블럭 )
          <pre>

 

글의 너비에 관련된 CSS 설정은 다음과 같았습니다.

기본 테마(Default Theme) 에서 읽기 쉬운 행 길이(Readable line length)를 사용하지 않을 때가 기본이었습니다.

.view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller {
    padding: var(--file-margins);
}

.markdown-source-view.mod-cm6 .cm-sizer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 100%;
}

.markdown-source-view.mod-cm6 .cm-content {
    flex-basis: unset !important;
    width: 0;
    caret-color: var(--text-normal);
    min-height: unset;
}

/* width 설정이 없다. */
.markdown-source-view.mod-cm6 .cm-line {
    position: relative;
    padding: 0;
}


.markdown-preview-view.is-readable-line-width {
    padding-inline: 30px;
}

/* 아예 이러한 설정들이 없다. */
.markdown-preview-view .markdown-preview-section {
}
.markdown-preview-view .markdown-preview-sizer {
}
.markdown-preview-view .markdown-preview-section > div {
}

 

위 CSS에 읽기 쉬운 행 길이(Readable line length)를 설정할 때 다음과 같은 스타일이 더해지더군요.
.is-readable-line-width 클래스 설정

.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer {
    max-width: var(--file-line-width);
    margin-left: auto;
    margin-right: auto;
}

.markdown-source-view.mod-cm6.is-readable-line-width .cm-content {
    max-width: var(--file-line-width);
}

.markdown-source-view.mod-cm6.is-readable-line-width .cm-line {
    max-width: var(--file-line-width);
}


.markdown-preview-view.is-readable-line-width .markdown-preview-section {
    width: 100%;
    max-width: var(--content-max-width, 45rem); /* 이것이 사용 됨 - 45rem , --content-max-width: undefined */
}

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
    max-width: var(--file-line-width); /* 사용 안됨 X */
    margin-left: auto;
    margin-right: auto;
}

.markdown-preview-view.is-readable-line-width .markdown-preview-section > div {
    margin-inline: auto;
    width: min(var(--content-base-width), 100%);
}

 

그래서 is-readable-line-width 클래스 설정된 것을 쓰지 못하도록 하는 방법(inherit)으로 문제를 풀어 봤습니다.

 

미니멀(Minimal) 테마에서는 여백이 문제가 생겨서 몇 개의 설정을 추가해야 했습니다.

 

더 나은 방법이나 조언이 있으면 댓글 바랍니다.