8000 Captions for other content · Issue #3 · flywire/caption · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Captions for other content #3

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

Jump to bottom
Open
flywire opened this issue Jun 28, 2020 · 5 comments
Open

Captions for other content #3

flywire opened this issue Jun 28, 2020 · 5 comments

Comments

@flywire
Copy link
Owner
flywire commented Jun 28, 2020

Allow captions on other content eg Tables.
@flywire
Copy link
Owner Author
flywire commented Jul 13, 2020 •
edited
Loading

Design table:

Content type Default Figure Table Other
Prefix type
Numbering false
Location top bottom
captionPrefixClass
captionClass
contentClass
id prefix
special process false stripTitle
Content tag <div class="type"> <figure> <table>
Caption tag <figcaption> <caption>
Prefix tag <span>
Search process <p> Type: <figure> <p>/<table>
Linked process stripTitle caption to line 2
id _type-N
  • shows defaults and differences from default
  • settings shown in bold
  1. all content types inherit the defaults
  2. some content types inherit different defaults
  3. extension defaults can be modified by options for all types or specific content types

@flywire
Copy link
Owner Author
flywire commented Jul 17, 2020

Note default browser styling eg: https://html.spec.whatwg.org/multipage/rendering.html

blockquote, figure { margin-inline-start: 40px; margin-inline-end: 40px; }

@flywire
Copy link
Owner Author
flywire commented Jul 17, 2020

Python-Markdown/markdown#1003

@flywire
Copy link
Owner Author
flywire commented Jul 17, 2020 •
edited
Loading

Test files to use to tidy up process.

caption/docs/index.md

    # caption - tests
    
    A simple test of some content types. They need CSS for formatting.
    
    Listing: Markdown code
    
    ```markdown
    ![Alt text](/path/to/image.png "Captioned figure")
    ```
    
    Instructions to add code colouring at: https://python-markdown.github.io/extensions/code_hilite/#step-2-add-css-classes
    
    ![gplv3_logo1](./docs/images/gplv3.png "Captioned figure")
    
    [![gplv3_logo2](./docs/images/gplv3.png "Linked captioned figure")](https://www.gnu.org/licenses/gpl-3.0.en.html)
    
    ![gplv3_logo3](./docs/images/gplv3.png "Captioned figure resized"){: style="width:300px"}
    
    [![gplv3_logo4](./docs/images/gplv3.png "Linked captioned figure resized"){: style="width:300px"}](https://www.gnu.org/licenses/gpl-3.0.en.html)
    
    Table: Caption example
    
    | Content     | Supported   |
    | ----------- | -----------:|
    | Figure      | Yes         |
    | Table       | No          |
    | Listing     | No          |

Target html file. Note CSS style sheet references at the start.

Index.html

<link rel="stylesheet" href="docs/css/styles.css">
<link rel="stylesheet" href="docs/css/extra.css">
<h1>caption - tests</h1>
<p>A simple test of some content types. They need CSS for formatting.</p>
<div class="listing" id="_listing-1">
<figcaption><span>Listing&nbsp;1:</span> Markdown code</figcaption>
</div>
<div class="codehilite"><pre><span></span><code><span class="o">!</span><span class="p">[</span><span class="n">Alt</span> <span class="n">text</span><span class="p">](</span><span class="o">/</span><span class="n">path</span><span class="o">/</span><span class="n">to</span><span class="o">/</span><span class="n">image</span><span class="p">.</span><span class="n">png</span> <span class="s">&quot;Captioned figure&quot;</span><span class="p">)</span>
</code></pre></div>


<p>Instructions to add code colouring at:  https://python-markdown.github.io/extensions/code_hilite/#step-2-add-css-classes</p>
<figure id="_figure-1">
<img alt="gplv3_logo1" src="./docs/images/gplv3.png" title="Captioned figure" />
<figcaption><span>Figure&nbsp;1:</span> Captioned figure</figcaption>
</figure>
<figure id="_figure-2">
<a href="https://www.gnu.org/li
8000
censes/gpl-3.0.en.html"><img alt="gplv3_logo2" src="./docs/images/gplv3.png" title="Linked captioned figure" /></a>
<figcaption><span>Figure&nbsp;2:</span> Linked captioned figure</figcaption>
</figure>
<figure id="_figure-3">
<img alt="gplv3_logo3" src="./docs/images/gplv3.png" title="Captioned figure resized" />
<figcaption><span>Figure&nbsp;3:</span> Captioned figure resized</figcaption>
</figure>
<figure id="_figure-4">
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html"><img alt="gplv3_logo4" src="./docs/images/gplv3.png" style="width:300px" title="Linked captioned figure resized" /></a>
<figcaption><span>Figure&nbsp;4:</span> Linked captioned figure resized</figcaption>
</figure>
<table id="_table-1">
<caption><span>Table&nbsp;1:</span> Caption example</caption>
<thead>
<tr>
<th>Content</th>
<th align="right">Supported</th>
</tr>
</thead>
<tbody>
<tr>
<td>Figure</td>
<td align="right">Yes</td>
</tr>
<tr>
<td>Table</td>
<td align="right">No</td>
</tr>
<tr>
<td>Listing</td>
<td align="right">No</td>
</tr>
</tbody>
</table>

caption/docs/css/extra.css

/* fix padding */

.listing,
.codehilite,
table,
table caption,
figure {
  background: lightgrey;
  padding-left: 10px;
  padding-right: 10px;
}

figure {
  padding: 10px;
  /* following lines remove figure indent */
  display: block;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.listing,
table caption {
  padding-top: 10px;
}

.codehilite,
table {
  padding-bottom: 10px;
}

figure img {
  text-align: center;
}

caption,
figcaption {
  color: blue;
  font-style: italic;
  text-align: left;
}

caption span,
figcaption span {
  font-style: normal;
  font-weight: bold;
}
  • add an image as caption/docs/images/gplv3.png

image

@hendrikp
Copy link
Contributor
hendrikp commented Mar 5, 2023

This was solved through the major-refactor PR and can be closed.

@flywire flywire mentioned this issue Nov 5, 2023
Open
@flywire flywire mentioned this issue Mar 16, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hendrikp @flywire
0