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.

Sign up for GitHub

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

Fix issues with wide content in elements with @cols #2355

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix issues with wide content in elements with @cols #2355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
87004a2
CSS: Allow columns created by cols to reflow wide conent
ascholerChemeketa Jan 4, 2025
eadd1b0
SA: Samples of wide content in columns in lists and exercises
ascholerChemeketa Jan 4, 2025
979efcf
Update prebuilt default theme
ascholerChemeketa Jan 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions css/components/helpers/_cols.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@
justify-content: start;
}

// allow a selector to appear in columns
// see lists and exercises for sample use

@mixin allow-cols($el, $col-gap: 2em) {
@for $i from 2 through 6 {
.cols#{$i} > #{$el} {
width: calc(100% / $i - #{$col-gap});
max-width: calc(100% / $i - #{$col-gap});
// columns are a suggestion enforced by a minimum size
// content that needs to be wider can reduce number of columns
// in its row
min-width: calc(100% / $i - #{$col-gap});
width: min-content;
margin-right: $col-gap;
}
}
Expand Down
40 changes: 20 additions & 20 deletions css/dist/theme-default-modern.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

147 changes: 144 additions & 3 deletions examples/sample-article/sample-article.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
% employed in a PreFigure linear algebra diagram
\newcommand{\bvec}{{\mathbf b}}
\newcommand{\vvec}{{\mathbf v}}
\newenvironment{sysofeqns}[1]
{\left\{\begin{array}{#1}}
{\end{array}\right.}
</macros>
<prefigure-preamble xmlns="https://prefigure.org">
<!-- employed in a PreFigure linear algebra diagram -->
Expand Down Expand Up @@ -5856,6 +5859,24 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.

</subsection>


<subsection>
<title>List Column Testing</title>

<p>This is a list arranged into two columns with some intentional layout challenges. The math is too long to fit in one column and can't be wrapped - it reduces the number of columns in its row. The long text items can be wrapped and stay within their column.
<ol cols="2" marker="(a)">
<li>One item.</li>
<li><em>Two</em> <alert>ducks</alert>.</li>
<li><p><m>\frac{d}{dx}\sec^{-1}(x) = \frac{1}{x\sqrt{x^2-1}} = \frac{1}{x\sqrt{x^2-1}}</m></p></li>
<li>Short item.</li>
<li>A long item that can be wrapped over multiple lines.</li>
<li>Four items.</li>
<li><!-- empty --></li>
<li>Another long entry that simultaneously tests that long entries look good in a list,
and also tests an odd number of entries in a two column list.</li>
</ol></p>
</subsection>


<exercises>
<title>Exercises (with lists)</title>
Expand Down Expand Up @@ -15092,9 +15113,11 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
<title>Exercises, Multiple Subsections</title>

<introduction>
<p>This <tag>section</tag> of the sample article demonstrates a <q>structured division.</q> You are reading the introduction to the division, then there is a faux <tag>subsection</tag>, followed by three <tag>exercises</tag> divisions. Note that the three are numbered as if they are also fellow<tag>subsection</tag>. And a cross-reference to one of the contained <tag>exercise</tag> will be numbered use the number of the <tag>subsection</tag>, <xref ref="exercise-challenging-one-structured" text="type-global" />.</p>
<p>This <tag>section</tag> of the sample article demonstrates a <q>structured division.</q> You are reading the introduction to the division, then there is a faux <tag>subsection</tag>, followed by three <tag>exercises</tag> divisions. Note that the three are numbered as if they are also fellow<tag>subsection</tag>. And a cross-reference to one of the contained <tag>exercise</tag> will be numbered use the number of the <tag>subsection</tag>, <xref ref="exercise-challenging-one-structured"
text="type-global"/>.</p>

<p>Compare this section with the similar <xref ref="exercises-single" text="type-global" />, previous. The following text is mostly nonsense, just for testing purposes.</p>
<p>Compare this section with the similar <xref ref="exercises-single"
text="type-global"/>, previous. The following text is mostly nonsense, just for testing purposes.</p>
</introduction>

<subsection>
Expand Down Expand Up @@ -15139,7 +15162,9 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.

<figure>
<caption>A figure in an <tag>exercise</tag> in a <em>structured</em> division to test that it is numbered with consideration of the containing <tag>exercises</tag></caption>
<image xml:id="cross-square-structured" width="10%" source="images/cross-square.png"/>
<image xml:id="cross-square-structured"
width="10%"
source="images/cross-square.png"/>
</figure>
</statement>
</exercise>
Expand Down Expand Up @@ -15218,6 +15243,122 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
</exercise>
</exercises>

<exercises>
<title>Layout challenge</title>
<exercisegroup cols="2">
<introduction>
<p>A multicolumn exercisegroup with layout challenges courtesy of Jeremey Sylvestre. The first two should be on one row. The next two should be on one row until the hint is opened. Then one that takes up an entire row. The final row should always have two exercises.</p>
</introduction>
<exercise>
<statement>
<p>
<m>\displaystyle
\begin{sysofeqns}{rcrcr}
4 x \amp + \amp 3 y \amp = \amp 4 \\
5 x \amp + \amp 4 y \amp = \amp 6
\end{sysofeqns}
</m>
</p>
</statement>
</exercise>
<exercise>
<statement>
<p>
<m>\displaystyle
\begin{sysofeqns}{rcrcr}
4 x \amp - \amp 36 y \amp = \amp 12 \\
-3 x \amp + \amp 27 y \amp = \amp -7
\end{sysofeqns}
</m>
</p>
</statement>
</exercise>
<exercise>
<statement>
<p>
<m>\displaystyle
\begin{sysofeqns}{rcrcr}
4 x \amp + \amp 3 y \amp = \amp 4 \\
5 x \amp + \amp 4 y \amp = \amp 6
\end{sysofeqns}
</m>
</p>
</statement>
</exercise>
<exercise>
<statement>
<p>
<m>\displaystyle
\begin{sysofeqns}{rcrcr}
4 x \amp - \amp 36 y \amp = \amp 12 \\
-3 x \amp + \amp 27 y \amp = \amp -7
\end{sysofeqns}
</m>
</p>
</statement>
<hint>
<title>OPEN ME!</title>
<p> Not really a hint, but a knowl with extra wide content. <m>\displaystyle
\begin{sysofeqns}{rcrcrcrcrcr}
2 x_1 \amp - \amp 4 x_2 \amp - \amp 24 x_3 \amp - \amp 3 x_4
\amp + \amp 18 \amp =
\amp 9 \\
-3 x_1 \amp + \amp 4 x_2 \amp + \amp 26 x_3 \amp + \amp 8 x_4
\amp - \amp 7 \amp =
\amp -17 \\
-1 x_1 \amp + \amp 2 x_2 \amp + \amp 12 x_3 \amp + \amp 2 x_4
\amp - \amp 7 \amp =
\amp - 5 \\
3 x_1 \amp - \amp 5 x_2 \amp - \amp 31 x_3 \amp - \amp 6 x_4
\amp + \amp 18 \amp =
\amp 15
\end{sysofeqns}
</m></p>
</hint>
</exercise>
<exercise>
<statement>
<p>
<m>\displaystyle
\begin{sysofeqns}{rcrcrcrcr}
6 x_1 \amp - \amp 13 x_2 \amp - \amp 17 x_3 \amp - \amp 6 x_4
\amp = \amp 0 \\
7 x_1 \amp - \amp 15 x_2 \amp - \amp 20 x_3 \amp - \amp 7 x_4
\amp = \amp 0 \\
5 x_1 \amp - \amp 11 x_2 \amp - \amp 14 x_3 \amp - \amp 4 x_4
\amp = \amp 0 \\
\end{sysofeqns}
</m>
</p>
</statement>
</exercise>
<exercise>
<statement>
<p>
<m>\displaystyle
\begin{sysofeqns}{rcrcr}
4 x \amp + \amp 3 y \amp = \amp 4 \\
5 x \amp + \amp 4 y \amp = \amp 6
\end{sysofeqns}
</m>
</p>
</statement>
</exercise>
<exercise>
<statement>
<p>
<m>\displaystyle
\begin{sysofeqns}{rcrcr}
4 x \amp + \amp 3 y \amp = \amp 4 \\
5 x \amp + \amp 4 y \amp = \amp 6
\end{sysofeqns}
</m>
</p>
</statement>
</exercise>
</exercisegroup>
</exercises>

<references>
<title>More Reading</title>

Expand Down