Open dandaopitiao opened 1 year ago
Hello,请问下你用的设备是 macOS 还是 Windows 呢?macOS上不太好实现……
我草,经过我一个晚上的苦苦 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;
}
不过,我还没全面排查 .md-p 标签都会被应用到哪些地方,不确定会不会影响表格、标题等的段落效果,因此这个issue开放一段时间供大家尝试排查下……
中文就是要两端对齐才行!下个版本一定把两端对齐加上!终于找到方法啦哈哈哈哈哈哈哈哈哈哈!这将绝对是中文 Typora 样式的伟大飞跃!!!
谢谢大佬!果然一下子美观好多好多,我用的是macOS设备
我已经发现去掉 .md-p 的 pre-wrap 会影响某些情况下的换行效果了……救命,好麻烦。。。
我已经发现去掉 .md-p 的 pre-wrap 会影响某些情况下的换行效果了……救命,好麻烦。。。
已确认这么写会导致“保留连续的换行”无效,除非换行手动写<br/>
。唉,这怎么搞…………
由于去掉 pre-wrap 会造成一些致命的后果,这个方法不再推荐。如果您正在处理少量文本,可以临时在 CSS 文件中使用上文给出的代码。
我草,经过我一个晚上的苦苦 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):
text-align: justify; display: block; } 然后就都对齐了。 我写了审稿意见回复,其中的Response用了“引用”,这样更改后,引用部分的内容、正文以及各级标题都能够完美的显示。
我草,经过我一个晚上的苦苦 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 Windows上typora用的是chromium内核,直接这么写确实没问题。
但如我前面所述,macOS上直接这样写是不行……
soga。不过我刚刚试了一下,还是有一些复杂的句型有点问题。总体上还算理想,不是特别特别的正式,够用了。
------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2023年5月8日(星期一) 上午10:30 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [Keldos-Li/typora-latex-theme] 如何设置两端对齐 (Issue #98)
@YYXC1993 Windows上typora用的是chromium内核,直接这么写确实没问题。
但如我前面所述,macOS上直接这样写是不行……
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>
我知道刚刚的问题咋回事了,如果把这些句子换成普通级别的就能对齐,但是我这里设置了3级标题,有时候就容易出问题。
------------------ 原始邮件 ------------------ 发件人: "Keldos-Li/typora-latex-theme" @.>; 发送时间: 2023年5月8日(星期一) 上午10:30 @.>; @.**@.>; 主题: Re: [Keldos-Li/typora-latex-theme] 如何设置两端对齐 (Issue #98)
@YYXC1993 Windows上typora用的是chromium内核,直接这么写确实没问题。
但如我前面所述,macOS上直接这样写是不行……
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>
请问大佬在哪里更改1、2和3级标题的对齐呀,我只找到了一级标题的对中。
------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2023年5月8日(星期一) 上午10:30 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [Keldos-Li/typora-latex-theme] 如何设置两端对齐 (Issue #98)
@YYXC1993 Windows上typora用的是chromium内核,直接这么写确实没问题。
但如我前面所述,macOS上直接这样写是不行……
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>
哈哈我已经搞定标题的对齐了,在所有的多级标题中都增加了两端对齐。大佬你可以考虑出一个win版本的,然后mac保持原样就好了。
------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2023年5月8日(星期一) 上午10:30 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [Keldos-Li/typora-latex-theme] 如何设置两端对齐 (Issue #98)
@YYXC1993 Windows上typora用的是chromium内核,直接这么写确实没问题。
但如我前面所述,macOS上直接这样写是不行……
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>
为了回复审稿人时,更美观一些,在作者代码的基础上对对齐部分以及引用部分做了一些改动(作者的意思是这个对齐方法只适用于win系统),其中引用部分参考了see-yue主题,并进行了边距和颜色的修改。 效果如下图: 代码如下图(改动部分我添加了注释)
@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;
}
rt 可以添加什么代码来实现吗?