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

如何设置两端对齐 #98

Open
dandaopitiao opened this issue Sep 22, 2022 · 15 comments
Open

如何设置两端对齐 #98

dandaopitiao opened this issue Sep 22, 2022 · 15 comments
Labels
help wanted ISSUE: Extra attention is needed 🏳 wontfix This will not be worked on
Milestone

Comments

@dandaopitiao
Copy link

rt 可以添加什么代码来实现吗?

@Keldos-Li
Copy link
Owner

Hello,请问下你用的设备是 macOS 还是 Windows 呢?macOS上不太好实现……

@Keldos-Li Keldos-Li added help wanted ISSUE: Extra attention is needed fixed for next release 已修复,下一个版本可见 labels Sep 22, 2022
@Keldos-Li
Copy link
Owner

Keldos-Li commented Sep 22, 2022

我草,经过我一个晚上的苦苦 google / stackoverflow 和多次尝试,我终于发现要在 Safari WebKit 上要实现两端对齐还需要把 white-space: pre-wrap; 改成 white-space: unset; !!!

再经过我苦苦调试发现 Typora 在 base.css 里预先默认设置了 pre-wrap!所以只需要覆盖 .md-p 的 white-space 样式属性!

!!!我真是大聪明!!!
现在您需要把 css 文件中的 #write p 修改一下,再增加 .md-p 用于覆盖。参考:

#write p {
    /* text-align: left; */
    /* justify-content: space-between; */
    display: block;
    text-align: justify!important;
}

.md-p {
    white-space: unset;
}

@Keldos-Li
Copy link
Owner

Keldos-Li commented Sep 22, 2022

不过,我还没全面排查 .md-p 标签都会被应用到哪些地方,不确定会不会影响表格、标题等的段落效果,因此这个issue开放一段时间供大家尝试排查下……

中文就是要两端对齐才行!下个版本一定把两端对齐加上!终于找到方法啦哈哈哈哈哈哈哈哈哈哈!这将绝对是中文 Typora 样式的伟大飞跃!!!

@dandaopitiao
Copy link
Author

谢谢大佬!果然一下子美观好多好多,我用的是macOS设备

@Keldos-Li
Copy link
Owner

Keldos-Li commented Sep 23, 2022

我已经发现去掉 .md-p 的 pre-wrap 会影响某些情况下的换行效果了……救命,好麻烦。。。

@Keldos-Li Keldos-Li added this to the Theme v1.0.0 milestone Sep 24, 2022
@Keldos-Li
Copy link
Owner

我已经发现去掉 .md-p 的 pre-wrap 会影响某些情况下的换行效果了……救命,好麻烦。。。

已确认这么写会导致“保留连续的换行”无效,除非换行手动写<br/>。唉,这怎么搞…………

@Keldos-Li Keldos-Li added 🏳 wontfix This will not be worked on and removed fixed for next release 已修复,下一个版本可见 labels Feb 13, 2023
@Keldos-Li
Copy link
Owner

Keldos-Li commented Feb 13, 2023

由于去掉 pre-wrap 会造成一些致命的后果,这个方法不再推荐。如果您正在处理少量文本,可以临时在 CSS 文件中使用上文给出的代码。

@Keldos-Li Keldos-Li changed the title 大佬好!请问如何可以设置两端对齐呀?谢谢大佬 如何设置两端对齐呀 Feb 14, 2023
@Keldos-Li Keldos-Li changed the title 如何设置两端对齐呀 如何设置两端对齐 Feb 15, 2023
@YYXC1993
Copy link

YYXC1993 commented May 8, 2023

我草,经过我一个晚上的苦苦 google / stackoverflow 和多次尝试,我终于发现要在 Safari WebKit 上要实现两端对齐还需要把 white-space: pre-wrap; 改成 white-space: unset; !!!

再经过我苦苦调试发现 Typora 在 base.css 里预先默认设置了 pre-wrap!所以只需要覆盖 .md-p 的 white-space 样式属性!

!!!我真是大聪明!!! 现在您需要把 css 文件中的 #write p 修改一下,再增加 .md-p 用于覆盖。参考:

#write p {
    /* text-align: left; */
    /* justify-content: space-between; */
    display: block;
    text-align: justify!important;
}

.md-p {
    white-space: unset;
}

不需要那么麻烦,我试了一下,只需要把第二个#write p稍微改一下就好了(我之前尝试了更改最前面的write,搜索了好久才找到你这里issues):

#write p {
text-align: justify;
display: block;
}
然后就都对齐了。
我写了审稿意见回复,其中的Response用了“引用”,这样更改后,引用部分的内容、正文以及各级标题都能够完美的显示。

@YYXC1993
Copy link

YYXC1993 commented May 8, 2023

我草,经过我一个晚上的苦苦 google / stackoverflow 和多次尝试,我终于发现要在 Safari WebKit 上要实现两端对齐还需要把 white-space: pre-wrap; 改成 white-space: unset; !!!
再经过我苦苦调试发现 Typora 在 base.css 里预先默认设置了 pre-wrap!所以只需要覆盖 .md-p 的 white-space 样式属性!
!!!我真是大聪明!!! 现在您需要把 css 文件中的 #write p 修改一下,再增加 .md-p 用于覆盖。参考:

#write p {
    /* text-align: left; */
    /* justify-content: space-between; */
    display: block;
    text-align: justify!important;
}

.md-p {
    white-space: unset;
}

不需要那么麻烦,我试了一下,只需要把第二个#write p稍微改一下就好了(我之前尝试了更改最前面的write,搜索了好久才找到你这里issues):

#write p { text-align: justify; display: block; } 然后就都对齐了。 我写了审稿意见回复,其中的Response用了“引用”,这样更改后,引用部分的内容、正文以及各级标题都能够完美的显示。

image
image

@Keldos-Li
Copy link
Owner

@YYXC1993 Windows上typora用的是chromium内核,直接这么写确实没问题。

但如我前面所述,macOS上直接这样写是不行……

@YYXC1993
Copy link

YYXC1993 commented May 8, 2023 via email

@YYXC1993
Copy link

YYXC1993 commented May 8, 2023 via email

@YYXC1993
Copy link

YYXC1993 commented May 8, 2023 via email

@YYXC1993
Copy link

YYXC1993 commented May 8, 2023 via email

@YYXC1993
Copy link

YYXC1993 commented May 9, 2023

为了回复审稿人时,更美观一些,在作者代码的基础上对对齐部分以及引用部分做了一些改动(作者的意思是这个对齐方法只适用于win系统),其中引用部分参考了see-yue主题,并进行了边距和颜色的修改。
效果如下图:
image
代码如下图(改动部分我添加了注释)

@charset "UTF-8";
:root {
  /* == 字体设置 == */
  /* 基准字体 */
  /* 备选:Times, "Times New Roman" */
  --base-Latin-font: "Latin Modern Roman", "Latin Modern Roman 10", Times;
  --base-Chinese-font: "家族宋", "宋体-简", "华文宋体", "Noto Serif CJK SC";
  --base-font-size: 9.5pt;
  /* 引言字体 */
  --quote-font: "Latin Modern Roman", "Latin Modern Roman 10", Times,
    "Times New Roman", "华文仿宋";
  /* em单位为一个正文字符(--base-font-size)大小,
  例如,如果您设置 --base-font-size 为 9.5pt,那么 1.05em = 1.05*9.5pt ≈ 10pt。下面的标题字体等设置也遵循该规则。
  这样,您就可以仅通过调整基准字体大小,而动态对其他元素大小做出调整。
  当然,您也可以直接设置以pt或px为单位的数值,将元素的大小固定下来,如 --quote-font-size: 10pt; */
  --quote-font-size: 1.05em;
  /* 代码字体(代码中的中文会调用 ui-font) */
  /* "Courier New" 从 Windows 3.1 起成为 Windows 官方提供的字体 */
  /* "Consolas" 从 Windows Vista 起成为 Windows 官方提供的字体 */
  --code-font: "Latin Modern Mono", "Latin Modern Mono 10", "Consolas", "Courier New";
  /* 侧边栏字体 */
  --ui-font: "阿里巴巴普惠体 2.0", "微软雅黑";
  /* source mode 字体 */
  /* 默认调用 code-font 和 ui-font */
  --sourceMode-font: "SF Mono", "阿里巴巴普惠体 2.0", "微软雅黑";
  /* 目录字体 */
  /* 默认调用 base-font */
  --toc-font: "";
  /* 默认调用 base-font-size */
  --toc-font-size: "";
  /* 公式字体 */
  --math-font-size: 1em;
  /* 表格字体 */
  /* 默认调用 heading-font */
  --table-title-font: "";
  /* 默认调用 base-font */
  --table-font: "";
  /* 标题字体(总设置) */
  --heading-Latin-font: var(--base-Latin-font);
  --heading-Chinese-font: "华文黑体";
  /* 标题字体分别设置 */
  /* 大标题(h1)字体 */
  --title-Chinese-font: "华文黑体";
  --title-font-size: 1.9em;
  /* h2字体 */
  --h2-Chinese-font: "华文黑体";
  --h2-font-size: 1.5em;
  /* h3字体 */
  --h3-Chinese-font: "华文黑体";
  --h3-font-size: 1.25em;
  /* h4字体 */
  --h4-Chinese-font: "华文楷体";
  --h4-font-size: 1.15em;
  /* h5字体 */
  --h5-Chinese-font: "华文仿宋";
  --h5-font-size: 1.10em;
  /* h6字体 */
  --h6-Chinese-font: "华文仿宋";
  --h6-font-size: 1.05em;
  /* 粗体样式设置 */
  /* 加粗风格时使用的字重;400等同于 normal,700等同于 bold,900等同于 heavy */
  --strong-weight: 900;
  /* 基础行距 */
  --base-line-height: 1.618em;
  /* == 页面设置 == */
  /* 打印页边距 */
  --set-margin: 1.8cm 2cm 1.2cm 2cm !important;
  /* == 控制设置 == */
  /* 目录中是否显示一级标题 */
  --toc-show-title: none;
  /* == 颜色设置 == */
  /* 超链接颜色 */
  --link-color-light: #2E67D3;
  --link-color-dark: #8bb1f9;
}

body {
  padding: 0 !important;
  margin: 0 !important;
  /* counter-reset: tableHead 0 imgHead 0; */
}

@media print {
  #write {
    padding: 0 !important;
  }

  @page {
    margin: 1.8cm 2cm 1.2cm 2cm !important;
    /* 页边距 */
  }
}
#write {
  font-family: var(--base-Latin-font), var(--base-Chinese-font), serif;
  font-size: var(--base-font-size);
  /* A4标准宽度 */
  max-width: 21cm;
  background-color: white;
  /* column-count: 2;
    column-gap: 25px;
    column-width: 8cm; 
    display: inline-block; */
  /* 这里可以试分栏的,但确实不适合实现 */
}
#write .md-math-block,
#write .md-rawblock,
#write p {
  margin-top: 1em;
  margin-bottom: 1em;
}
#write p {
  text-align: justify;
  display: block;
}
#write a {
  color: var(--link-color-light);
}

hr {
  border-top: solid 1px #ddd;
  margin-top: 1.8em;
  margin-bottom: 1.8em;
}

img {
  /* 避免图片在导出时被断开 */
  page-break-inside: avoid;
}

strong {
  font-weight: var(--strong-weight);
}

@media screen {
  #write {
    padding: var(--set-margin);
    /* 添加一个淡蓝色的边框 */
    /* border: 0.8px solid #AAC ; */
    /* 页边阴影 */
    box-shadow: 0 0 24px 12px #cccccc;
  }
}
.MathJax {
  font-size: var(--math-font-size);
}

/* typora 编写模式 */
#typora-source {
  font-family: var(--sourceMode-font), var(--code-font), var(--ui-font), monospace;
  line-height: 2em;
}

/* 侧边大纲标题 */
.sidebar-content .outline-h1 {
  counter-reset: outline-h2;
}
.sidebar-content .outline-h2 {
  counter-reset: outline-h3;
}
.sidebar-content .outline-h2 .outline-label:before {
  counter-increment: outline-h2;
  content: counter(outline-h2) " ";
}
.sidebar-content .outline-h3 {
  counter-reset: outline-h4;
}
.sidebar-content .outline-h3 .outline-label:before {
  counter-increment: outline-h3;
  content: counter(outline-h2) "." counter(outline-h3) "  ";
}
.sidebar-content .outline-h4 {
  counter-reset: outline-h5;
}
.sidebar-content .outline-h4 .outline-label:before {
  counter-increment: outline-h4;
  content: counter(outline-h2) "." counter(outline-h3) "." counter(outline-h4) "  ";
}
.sidebar-content .outline-h5 {
  counter-reset: outline-h6;
}
.sidebar-content .outline-h5 .outline-label:before {
  counter-increment: outline-h5;
  content: counter(outline-h2) "." counter(outline-h3) "." counter(outline-h4) "." counter(outline-h5) "  ";
}

.sidebar-content {
  /* 侧边栏的字体修改 */
  font-family: var(--ui-font);
  list-style: none;
}

/* 元数据(如 YAML front matter)的背景框 */
pre.md-meta-block {
  background: #cccccc;
  padding: 1.4em;
  font-family: var(--code-font), var(--ui-font), monospace;
  font-size: 0.8em;
}

#write > h3.md-focus:before,
#write > h4.md-focus:before,
#write > h5.md-focus:before,
#write > h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
  color: inherit;
  border: inherit;
  border-radius: inherit;
  position: inherit;
  left: initial;
  float: none;
  top: initial;
  font-size: inherit;
  padding-left: inherit;
  padding-right: inherit;
  vertical-align: inherit;
  font-weight: inherit;
  line-height: inherit;
}

#write {
  counter-reset: h2 0 h3 0 h4 0 h5 0 h6 0;
}
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
  font-weight: bold;
  page-break-after: avoid !important;
}
#write h1 {
  font-family: var(--heading-Latin-font), var(--title-Chinese-font), serif;
  text-align: center;
  column-span: all;
  font-size: var(--title-font-size);
}
#write h2 {
  font-family: var(--heading-Latin-font), var(--h2-Chinese-font), serif;
  text-align: justify;
  display: block;
  font-size: var(--h2-font-size);
}
#write h3 {
  font-family: var(--heading-Latin-font), var(--h3-Chinese-font), serif;
  text-align: justify;
  display: block;
  font-size: var(--h3-font-size);
  line-height: var(--h3-font-size);
}
#write h4 {
  font-family: var(--heading-Latin-font), var(--h4-Chinese-font), serif;
  text-align: justify;
  display: block;
  font-size: var(--h4-font-size);
  line-height: var(--h4-font-size);
}
#write h5 {
  font-family: var(--heading-Latin-font), var(--h5-Chinese-font), serif;
  text-align: justify;
  display: block;
  font-size: var(--h5-font-size);
  line-height: var(--h5-font-size);
}
#write h6 {
  font-family: var(--heading-Latin-font), var(--h6-Chinese-font), serif;
  text-align: justify;
  display: block;
  font-size: var(--h6-font-size);
  /* 没有写错,为了避免行距太小才这么写 */
  line-height: var(--h5-font-size);
}
#write h1 {
  counter-reset: h2;
}
#write h2 {
  counter-reset: h3;
}
#write h3 {
  counter-reset: h4;
}
#write h4 {
  counter-reset: h5;
}
#write h5 {
  counter-reset: h6;
}

#write h2:before {
  counter-increment: h2;
  content: counter(h2);
  margin-right: 1.2em;
}

#write h3:before, h3.md-focus.md-heading:before {
  counter-increment: h3;
  content: counter(h2) "." counter(h3);
  margin-right: 1.2em;
}

#write h4:before, h4.md-focus.md-heading:before {
  counter-increment: h4;
  content: counter(h2) "." counter(h3) "." counter(h4);
  margin-right: 1.2em;
}

#write h5:before, h5.md-focus.md-heading:before {
  counter-increment: h5;
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
  margin-right: 1.2em;
}

#write h6:before, h6.md-focus.md-heading:before {
  counter-increment: h6;
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
  margin-right: 1.2em;
}

/* 参考文献(脚注)块 */
.footnotes {
  font-size: 0.95em;
}

.footnotes-area .footnote-line {
  color: var(--text-color);
}
.footnotes-area hr {
  border: 0;
  color: #00000000;
}

/* 无序列表 */
ul {
  list-style: disc;
}
ul ul {
  /*list-style: circle;*/
  /* 请勿删除“–”后的空格, 他们对缩进有一定影响, 下同 */
  list-style: "–   ";
}
ul ul ul {
  list-style: "◦  ";
}

/* 有序列表 */
ol {
  list-style: decimal;
}
ol ol {
  counter-reset: liist;
  list-style: none;
}
ol ol li {
  counter-increment: liist;
  position: relative;
}
ol ol li::before {
  content: "(" counter(liist,lower-alpha) ")";
  position: absolute;
  left: -1.8em;
}
ol ol ol {
  counter-reset: liiist;
  list-style: none;
  margin: 0;
}
ol ol ol li {
  counter-increment: liiist;
  position: relative;
}
ol ol ol li::before {
  content: counter(liiist,lower-roman) ".";
  align-self: flex-end;
  position: absolute;
  left: -4.5em;
  /* -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;*/
  /* 为了让项目编号是重新用句点对齐而不是左对齐 */
  width: 4em;
  text-align: right;
}

li {
  position: relative;
}

ol, ul {
  padding-inline-start: 2em;
}

/* task列表 */
.md-task-list-item > input {
  margin-top: 0.42em;
  margin-left: -1.5em;
  width: 1em !important;
  height: 1em !important;
}

#write table {
  /* 三线表第一条线宽度 */
  border-top: 1.2pt solid;
  /* 三线表第二条线宽度 */
  border-bottom: 1.2pt solid;
  font-family: var(--table-font), var(--base-Latin-font), var(--base-Chinese-font), serif;
  /* font-size: var(--base-font-size); */
  text-align: center;
  page-break-inside: avoid;
  border-spacing: 6px;
  /* 自动布局表格宽度,如果有时内容太紧建议直接加空格吧,我自己看不惯和页面等宽的大表格 */
  width: auto;
  /* 使表格默认居中;虽然这个代码不好,但好像没别的实现办法 */
  margin: 0 auto;
}
#write table td {
  padding: 2px;
}
#write table tr {
  padding: 2px;
}
#write th {
  padding: 0px 6px;
}
#write thead {
  /* 表格标题(首行)样式 */
  /* 三线表表头的线 */
  border-bottom: 0.5pt solid;
  font-family: var(--table-title-font), var(--heading-Latin-font), var(--heading-Chinese-font), serif !important;
  /* font-size: var(--base-font-size); */
  font-weight: var(--strong-weight);
}

/* 一个>的引言仅为两字符缩进,使用>>的引言为传统引言样式,具有左竖线、左缩进 */
blockquote {
  font-style: normal;
  font-family: var(--quote-font), var(--base-Latin-font), var(--base-Chinese-font), -apple-system, serif;
  font-size: var(--quote-font-size);
  border-left: 0.2em solid #35455b; /* 增加引用的竖线@YYXC */
  border-color: #808080;/* 竖线颜色,灰色@YYXC */
  background-color: rgb(240,248,255);/* 引用块背景色,灰色@YYXC */
  /* 文字离左边框的距离 */
  padding-left: 1em;  /* 原始设置是2em */
  padding-right: 0.8em;/* 原始设置是2em */
  /* 左边框离页面边的距离 */
  margin-left: 0;
}

blockquote p:first-child {
  padding-top: 1ch;
}

blockquote p:last-child {
  padding-bottom: 1ch;
}

blockquote blockquote {
  border-left: 4px solid #b3b3b3;
  padding-left: calc(2ch - 4px);
  padding-right: 0;
  margin-left: -4px;
  border-radius: 0;
}

/* 行内代码 */
code {
  font-family: var(--code-font), var(--ui-font), monospace;
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code,
p code,
li code {
  color: #3c70c6;
  background-color: #fefefe;
  /* 阴影 */
  box-shadow: 0 0 1px 1px #c8d3df;
  font-family: var(--code-font), var(--ui-font), monospace;
  box-sizing: border-box;
  border-right: 0px;
  margin: 0 2px 0 2px;
  padding: 0 2px 0 2px;
  /* 圆角 */
  border-radius: 2px 2px 2px 2px;
}

/* 代码块样式 */
.md-fences,
.CodeMirror pre {
  font-size: 1em;
}

.CodeMirror-wrap {
  /* padding: 10px; */
  font-size: 1em;
}

.CodeMirror-code pre {
  font-family: var(--code-font), var(--ui-font), monospace;
}

/* 目录 */
.md-toc {
  font-size: var(--toc-font-size);
}

.md-toc-content {
  margin-left: 2em;
  /* 修复缺失上级标题时无法递增 */
  counter-reset: toc-h2 toc-h3 toc-h4;
  page-break-after: always;
}

.md-toc-inner {
  margin-left: 0 !important;
  color: var(--text-color) !important;
}

.md-toc-item {
  color: var(--text-color) !important;
}

/* 目录标题内容属性 */
.md-toc-h2,
.md-toc-h3,
.md-toc-h4,
.md-toc-h5,
.md-toc-h6 {
  font-size: var(--toc-font-size);
  font-family: var(--toc-font), var(--base-Latin-font), var(--base-Chinese-font), serif;
}

.md-toc-h2 {
  font-weight: var(--strong-weight);
}

/* 目录标题前 */
.md-toc-content .md-toc-h1 {
  display: var(--toc-show-title);
  counter-reset: toc-h2;
}
.md-toc-content .md-toc-h2 {
  counter-reset: toc-h3;
}
.md-toc-content .md-toc-h3 {
  counter-reset: toc-h4;
}
.md-toc-content .md-toc-h4 {
  counter-reset: toc-h5;
}
.md-toc-content .md-toc-h5 {
  counter-reset: toc-h6;
}
.md-toc-content .md-toc-h2:before {
  counter-increment: toc-h2;
  content: counter(toc-h2);
  margin-right: 1em;
  font-weight: var(--strong-weight);
}
.md-toc-content .md-toc-h3:before {
  counter-increment: toc-h3;
  content: counter(toc-h2) "." counter(toc-h3);
  margin-left: 1.5em;
  margin-right: 0.5em;
}
.md-toc-content .md-toc-h4:before {
  counter-increment: toc-h4;
  content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4);
  margin-left: 3.5em;
  margin-right: 0.5em;
}
.md-toc-content .md-toc-h5:before {
  counter-increment: toc-h5;
  content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4) "." counter(toc-h5);
  margin-left: 5.5em;
  margin-right: 0.5em;
}
.md-toc-content .md-toc-h6:before {
  counter-increment: toc-h6;
  content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4) "." counter(toc-h5) "." counter(toc-h6);
  margin-left: 7.5em;
  margin-right: 0.5em;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted ISSUE: Extra attention is needed 🏳 wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

3 participants