Skip to content

Commit

Permalink
v4.5 font-size span styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@MartinPacker
MartinPacker committed Jun 16, 2024
1 parent ff13eb5 commit 55e938f
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 40 deletions.
47 changes: 35 additions & 12 deletions docs/user-guide.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1164,7 +1164,7 @@ <h3 id="table-of-contents">Table Of Contents<a class="headerlink" href="#table-o
</li>
<li><a href="#html-comments">HTML Comments</a></li>
<li><a href="#special-text-formatting">Special Text Formatting</a><ul>
<li><a href="#using-html-&lt;span&gt;-elements-to-specify-text-colours-and-underlining">Using HTML <code>&lt;span&gt;</code> Elements To Specify Text Colours And Underlining</a><ul>
<li><a href="#using-html-&lt;span&gt;-elements-to-specify-text-effects">Using HTML <code>&lt;span&gt;</code> Elements To Specify Text Effects</a><ul>
<li><a href="#using-html-&lt;span&gt;-elements-with-class">Using HTML <code>&lt;span&gt;</code> Elements with <code>class</code></a></li>
<li><a href="#using-html-&lt;span&gt;-elements-with-style">Using HTML <code>&lt;span&gt;</code> Elements with <code>style</code></a></li>
</ul>
Expand Down Expand Up @@ -1208,6 +1208,7 @@ <h3 id="table-of-contents">Table Of Contents<a class="headerlink" href="#table-o
<li><a href="#associating-a-class-name-with-a-background-colour-with-stylebgcolor">Associating A Class Name with A Background Colour With <code>style.bgcolor</code></a></li>
<li><a href="#associating-a-class-name-with-a-foreground-colour-with-stylefgcolor">Associating A Class Name with A Foreground Colour With <code>style.fgcolor</code></a></li>
<li><a href="#associating-a-class-name-with-text-emphasis-with-styleemphasis">Associating A Class Name With Text Emphasis With <code>style.emphasis</code></a></li>
<li><a href="#associating-a-class-name-with-font-size-with-stylefontsize">Associating A Class Name With Font Size with <code>style.fontsize</code></a></li>
<li><a href="#template-presentation-template">Template Presentation - <code>template</code></a></li>
<li><a href="#specifying-an-abstract-slide-with-abstracttitle">Specifying An Abstract Slide With <code>abstractTitle</code></a></li>
<li><a href="#specifying-text-size-with-basetextsize-and-basetextdecrement">Specifying Text Size With <code>baseTextSize</code> And <code>baseTextDecrement</code></a></li>
Expand Down Expand Up @@ -1484,6 +1485,11 @@ <h2 id="change-log">Change Log<a class="headerlink" href="#change-log" title="Pe
</thead>
<tbody>
<tr>
<td align="left">4.5</td>
<td align="right">16&nbsp;June&nbsp;2024</td>
<td align="left">Support for <code>fontsize</code> in <a href="#using-html-span-elements-to-specify-text-effects">styling</a>.</td>
</tr>
<tr>
<td align="left">4.4</td>
<td align="right">6&nbsp;May&nbsp;2024</td>
<td align="left">Support for Python 3.12 and 3.13 (tested with alphas 5 &amp; 6). <code>imghdr</code> package is no longer used to guess graphics file types.</td>
Expand Down Expand Up @@ -2736,8 +2742,15 @@ <h2 id="special-text-formatting">Special Text Formatting<a class="headerlink" hr
</table>
<p><strong>Note:</strong> Superscript works by raising the text baseline. Subscript works by lowering it. This is how Powerpoint itself does it.</p>
<p><a id="using-html-%3Cspan%3E-elements-to-specify-text-colours-and-underlining"></a></p>
<h3 id="using-html-span-elements-to-specify-text-colours-and-underlining">Using HTML <code>&lt;span&gt;</code> Elements To Specify Text Colours And Underlining<a class="headerlink" href="#using-html-span-elements-to-specify-text-colours-and-underlining" title="Permanent link"></a></h3>
<p>You can set the background or foreground colour of a piece of text. To do this use the <code>&lt;span&gt;</code> HTML element:</p>
<h3 id="using-html-span-elements-to-specify-text-effects">Using HTML <code>&lt;span&gt;</code> Elements To Specify Text Effects<a class="headerlink" href="#using-html-span-elements-to-specify-text-effects" title="Permanent link"></a></h3>
<p>You can set a number of attributes for a piece of text&colon;</p>
<ul>
<li>Foreground colour</li>
<li>Background colour</li>
<li>Font effects such as bold</li>
<li>Font size</li>
</ul>
<p>To do this use the <code>&lt;span&gt;</code> HTML element:</p>
<ul>
<li>You can use <code>&lt;span class= "..." &gt;</code> - which is probably more compact but less direct. </li>
<li>You can use <code>&lt;span style= "..." &gt;</code> - which is more direct but less compact.</li>
Expand All @@ -2752,6 +2765,7 @@ <h4 id="using-html-span-elements-with-class">Using HTML <code>&lt;span&gt;</code
<li><code>style.bgcolor.</code> - described in <a href="#associating-a-class-name-with-a-background-colour-with-stylebgcolor">Associating A Class Name With A Background Colour With <code>style.bgcolor</code></a>.</li>
<li><code>style.fgcolor</code> - described in <a href="#associating-a-class-name-with-a-foreground-colour-with-stylefgcolor">Associating A Class Name With A Foreground Colour With <code>style.fgcolor</code></a>.</li>
<li><code>style.emphasis</code> - described in <a href="#associating-a-class-name-with-text-emphasis-with-styleemphasis">Associating A Class Name With Text Emphasis With <code>style.emphasis</code></a>.</li>
<li><code>style.fontsize</code> - described in <a href="#associating-a-class-name-with-font-size-with-style-fontsize">Associating A Class Name With Font Size With <code>style.fontsize</code></a>. </li>
</ul>
<p>If you coded metadata</p>
<pre><code>style.fgcolor.yellow: FFFF00
Expand All @@ -2772,7 +2786,7 @@ <h4 id="using-html-span-elements-with-class">Using HTML <code>&lt;span&gt;</code
background-color: #FFFF00;
font-weight: bold;
font-style: italic;

font-size: 24px;
}
&lt;/style&gt;
</code></pre>
Expand All @@ -2789,9 +2803,10 @@ <h4 id="using-html-span-elements-with-style">Using HTML <code>&lt;span&gt;</code
<li>Underlining with <code>text-decoration: underline</code></li>
<li>Bold with <code>font-weight: bold</code></li>
<li>Italic with <code>font-style: italic</code></li>
<li>Font size with <code>font-size</code></li>
</ul>
<p>Here is an example:</p>
<pre><code>Here's &lt;span style="font-weight: bold;font-style: italic;color: #0000FF;"&gt;blue bold italic&lt;/span&gt; text.
<pre><code>Here's &lt;span style="font-weight: bold;font-style: italic;color: #0000FF;font-size: 16.5px;"&gt;blue bold italic&lt;/span&gt; text.
</code></pre>
<p>Notice the <code>color</code> specification is in Hexadecimal RGB (Red Green Blue) format. CSS colour names are not supported.</p>
<h3 id="html-entity-references">HTML Entity References<a class="headerlink" href="#html-entity-references" title="Permanent link"></a></h3>
Expand Down Expand Up @@ -2888,8 +2903,8 @@ <h3 id="html-entity-references">HTML Entity References<a class="headerlink" href
<td align="center">&nwarr;</td>
<td align="left"><code>&amp;euro;</code></td>
<td align="center">&euro;</td>
<td align="left"></td>
<td align="center"></td>
<td align="left"><code>&amp;Oslash;</code></td>
<td align="center">&Oslash;</td>
</tr>
<tr>
<td align="left"><code>&amp;lowast;</code></td>
Expand All @@ -2898,8 +2913,8 @@ <h3 id="html-entity-references">HTML Entity References<a class="headerlink" href
<td align="center">&searr;</td>
<td align="left"><code>&amp;hellip;</code></td>
<td align="center">&hellip;</td>
<td align="left"></td>
<td align="center"></td>
<td align="left"><code>&amp;oslash;</code></td>
<td align="center">&oslash;</td>
</tr>
<tr>
<td align="left"><code>&amp;semi;</code></td>
Expand Down Expand Up @@ -3223,7 +3238,7 @@ <h4 id="controlling-adjusting-title-positions-and-sizes-adjusttitles">Controllin
<p>The default is <code>yes</code>.</p>
<h4 id="associating-a-class-name-with-a-background-colour-with-stylebgcolor">Associating A Class Name with A Background Colour With <code>style.bgcolor</code><a class="headerlink" href="#associating-a-class-name-with-a-background-colour-with-stylebgcolor" title="Permanent link"></a></h4>
<p><a id="associating-a-class-name-with-a-background-color-with-style-bgcolor"></a></p>
<p>You can use HTML <code>&lt;span&gt;</code> elements to set the background colour, as described in <a href="#using-html-ltstylegt-elements-to-specify-text-colours-and-underlining">Using HTML &lt;style&gt; Elements To Specify Text Colours And Underlining</a>.</p>
<p>You can use HTML <code>&lt;span&gt;</code> elements to set the background colour, as described in <a href="#using-html-span-elements-to-specify-text-effects">Using HTML &lt;style&gt; Elements To Specify Text Effects</a>.</p>
<p>Here is an example:</p>
<pre><code>style.bgcolor.yellow: FFFF00
</code></pre>
Expand All @@ -3236,7 +3251,7 @@ <h4 id="associating-a-class-name-with-a-background-colour-with-stylebgcolor">Ass
<p>which is in fact yellow.</p>
<h4 id="associating-a-class-name-with-a-foreground-colour-with-stylefgcolor">Associating A Class Name with A Foreground Colour With <code>style.fgcolor</code><a class="headerlink" href="#associating-a-class-name-with-a-foreground-colour-with-stylefgcolor" title="Permanent link"></a></h4>
<p><a id="associating-a-class-name-with-a-foreground-color-with-style-fgcolor"></a></p>
<p>You can use HTML <code>&lt;span&gt;</code> elements to set the foreground colour, as described in <a href="#using-html-ltstylegt-elements-to-specify-text-colours-and-underlining">Using HTML &lt;style&gt; Elements To Specify Text Colours And Underlining</a>.</p>
<p>You can use HTML <code>&lt;span&gt;</code> elements to set the foreground colour, as described in <a href="#using-html-span-elements-to-specify-text-effects">Using HTML &lt;style&gt; Elements To Specify Text Effects</a>.</p>
<p>Here is an example:</p>
<pre><code>style.fgcolor.red: FF0000
</code></pre>
Expand All @@ -3249,13 +3264,21 @@ <h4 id="associating-a-class-name-with-a-foreground-colour-with-stylefgcolor">Ass
<p>which is in fact red.</p>
<h4 id="associating-a-class-name-with-text-emphasis-with-styleemphasis">Associating A Class Name With Text Emphasis With <code>style.emphasis</code><a class="headerlink" href="#associating-a-class-name-with-text-emphasis-with-styleemphasis" title="Permanent link"></a></h4>
<p><a id="associating-a-class-name-with-text-emphasis-with-style-emphasis"></a></p>
<p>You can use HTML <code>&lt;span&gt;</code> elements to bold text, make it italic, or underline it - as described in <a href="#using-html-ltstylegt-elements-to-specify-text-colours-and-underlining">Using HTML &lt;style&gt; Elements To Specify Text Colours And Underlining</a>.</p>
<p>You can use HTML <code>&lt;span&gt;</code> elements to bold text, make it italic, or underline it - as described in <a href="#using-html-span-elements-to-specify-text-effects">Using HTML &lt;style&gt; Elements To Specify Text Effects</a>.</p>
<p>Here is an example:</p>
<pre><code>style.emphasis.important: bold underline
</code></pre>
<p>In this example the class &ldquo;important&rdquo; is associated with bolding the text and underlining it.</p>
<p>You can also use <code>italic</code>.</p>
<p>As the example shows, separate the emphasis attributes with a space.</p>
<h4 id="associating-a-class-name-with-font-size-with-stylefontsize">Associating A Class Name With Font Size with <code>style.fontsize</code><a class="headerlink" href="#associating-a-class-name-with-font-size-with-stylefontsize" title="Permanent link"></a></h4>
<p><a id="associating-a-class-name-with-font-size-with-style-fontsize"></a></p>
<p>You can use HTML <code>&lt;span&gt;</code> elements to specify the font size for a piece of text - as described in <a href="#using-html-span-elements-to-specify-text-effects">Using HTML &lt;style&gt; Elements To Specify Text Effects</a>.</p>
<p>Here is an example:</p>
<pre><code>style.fontsize.christopher: 40px
</code></pre>
<p>In this example the class &ldquo;christopher&rdquo; is associated with setting the text&rsquo;s font size to 40 pixels.</p>
<p><strong>Note:</strong> You must specify font size in pixels, with &ldquo;px&rdquo; directly after the numeric part - which can be integer or floating point.</p>
<h4 id="template-presentation-template">Template Presentation - <code>template</code><a class="headerlink" href="#template-presentation-template" title="Permanent link"></a></h4>
<p><a id="template-presentation-template"></a></p>
<p>You can specify a different template file to create the presentation from than the one supplied with python-pptx. The one supplied with md2pptx is a very good one to work from:</p>
Expand Down
7 changes: 4 additions & 3 deletions docs/user-guide.log
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ mdpre Markdown Preprocessor v0.6.8 (8 March, 2024)
Def mdpre_date = 8 March, 2024
Def mdpre_level = 0.6.8
Def userid = martinpacker
Def time = 17&colon;11
Def date = 6 May&comma; 2024
Def time = 16&colon;10
Def date = 16 June&comma; 2024
Def TOC = Table Of Contents
Def md = Markdown
Def pp = Powerpoint
Expand Down Expand Up @@ -70,7 +70,7 @@ CSV Stop
..... Special Text Formatting
CSV Start
CSV Stop
..... ..... Using HTML `<span>` Elements To Specify Text Colours And Underlining
..... ..... Using HTML `<span>` Elements To Specify Text Effects
..... ..... ..... Using HTML `<span>` Elements with `class`
..... ..... ..... Using HTML `<span>` Elements with `style`
..... ..... HTML Entity References
Expand Down Expand Up @@ -105,6 +105,7 @@ CSV Stop
..... ..... ..... Associating A Class Name with A Background Colour With `style.bgcolor`
..... ..... ..... Associating A Class Name with A Foreground Colour With `style.fgcolor`
..... ..... ..... Associating A Class Name With Text Emphasis With `style.emphasis`
..... ..... ..... Associating A Class Name With Font Size with `style.fontsize`
..... ..... ..... Template Presentation - `template`
..... ..... ..... Specifying An Abstract Slide With `abstractTitle`
..... ..... ..... Specifying Text Size With `baseTextSize` And `baseTextDecrement`
Expand Down
Loading

0 comments on commit 55e938f

Please sign in to comment.