So I'm writing reStructuredText which creates an HTML page and a PDF at the same time. I'd like to add alternative text for the image in HTML, but when I add it in my code the image doesn't work in the PDF!
My code without alternative text (which work in both case):
.. image:: https://********.jpg
My code that doesn't work in PDF:
|alternative en plusieurs mots|
.. |alternative en plusieurs mots| image:: https://*********.jpg
From the documentation of the docutils image directive, the following should work:
.. image:: https://********.jpg
:alt: alternative en plusieurs mots
Related
I would like to format an internal link - defined with :ref: - in my documentation using CSS classes.
My problem is that I cannot convert :ref:`Link <internal_link> to the following bit of HTML Link
I've tried defining a new role but that was unsuccessful too.
.. role:: ref
:class: btn btn-sm btn-primary
:ref:`Link <internal_link>`
My current solution is to use raw html and render it as such, but I cannot link the RST files but have to point to the HTML files instead (which doesn't work for PDF output).
.. role:: raw-html(raw)
:format: html
:raw-html:`Link`
Does anyone know how to add custom CSS classes to :ref:?
I'm not sure about getting the class in the link directly. But you should be able to get it in the parent with:
.. cssclass:: btn-primary
:ref:`link`
then adjust the css selector to use:
.btn-primary a
With Hugo static site generator, is it possible to have it automatically put links around header elements? I see that it does fill in the ID attribute so it can be referenced but I would like to automatically create the link as well, like this:
<a href="/post/cool-blog-post#some-interesting-title">
<h2 id="some-interesting-title">Some Interesting Title</h2>
</a>
I did not see anyway in the documentation to do this and I think it would be helpful for users linking to a particular point in a lengthy post.
As far as I'm aware it's not possible to achieve it out-of-the-box, that is, out-of-the-hugo.
I had this same wish myself; I solved it via jQuery, wrapping all h2's and h3's dynamically with links, generating slugs on the go:
Then I've got a sticky sidebar nav which acts as a way to smooth-scroll between the headings, plus it highlights the current heading:
Today I would code it differently code-wise (probably without jQuery) but I'm quite happy with how it works. I think JS overhead is minimal, especially if coded neatly.
This doesn't seem to be possible out of the box. There are two ways of working around it that I can think of: using JavaScript, as revelt suggested, or using HTML in your markdown.
For example, consider the HTML you supplied above.
<a href="/post/cool-blog-post#some-interesting-title">
<h2 id="some-interesting-title">Some Interesting Title</h2>
</a>
If you put this code directly into a Hugo markdown document, it will produce the kind of link you are looking for. However, this is a pain to type every time, so to reduce your work you can make a shortcode.
In layouts/shortcodes/link-heading.html:
{{ $id := .Get 0 | lower | replaceRE "[^0-9a-z]" "-" | replaceRE "-+" "-" -}}
<a href="#{{ $id }}">
<h2 id="{{ $id }}">{{ .Get 0 }}</h2>
</a>
In your markdown document:
{{< link-heading "Some Interesting Title" >}}
I have left the base URL out here, but you can pass it as a parameter from your markdown document if you want. (Of course, then you have to know what the URL is without having Hugo do it for you, which is not ideal.)
This approach has the disadvantages that you can't use the normal markdown heading syntax, and that you don't get Hugo's built-in resolution of duplicate anchors. But it will get the job done.
Easy enough with javascript, add this snippet before your closing </body> tag:
<script>
(function addHeadingLinks(){
var article = document.getElementById('article');
var headings = article.querySelectorAll('h1, h2, h3, h4, h5, h6');
headings.forEach(function(heading){
if(heading.id){
var a = document.createElement('a');
a.innerHTML = heading.innerHTML;
a.href = '#'+heading.id;
heading.innerHTML = '';
heading.appendChild(a);
}
});
})();
</script>
I have a .rst document which was imported from Wordpress using wp2rst (which uses pandoc).
During the import, all my images were translated into substituted.. image:: as such :
This is some text |myimage| followed by some more text
.. |myimage| image:: https://myiage.png
:class:alignnone size-full wp-image-1864
:width: 1075px
:height: 135px
My images originally have captions. So I tried something like this :
This is some text |myimage| followed by some more text
.. |myimage| figure:: https://myimage.png
:class:alignnone size-full wp-image-1864
:width: 1075px
:height: 135px
This is my figure's caption
I get the following error when running Sphinx :
WARNING: Substitution definition "myimage" empty or invalid.
Working with figures in a more traditional fashion works well, but it would require me to refashion the entirety of
This is some text
.. figure:: https://myimage.png
:class:alignnone size-full wp-image-1864
:width: 1075px
:height: 135px
This is my figure's caption
followed by some more text
Is there a way to create substitutes for .. figure:: the same way as .. image::?
I'm only looking to format a specific string within a cell. I change that cell's format to "Markdown" but I'm not sure how to change text color of a single word.
I don't want to change the look of the whole notebook (via a CSS file).
You can simply use raw html tags like
foo <font color='red'>bar</font> foo
Be aware that this will not survive a conversion of the notebook to latex.
As there are some complaints about the deprecation of the proposed solution. They are totally valid and Scott has already answered the question with a more recent, i.e. CSS based approach.
Nevertheless, this answer shows some general approach to use html tags within IPython to style markdown cell content beyond the available pure markdown capabilities.
Similarly to Jakob's answer, you can use HTML tags. Just a note that the color attribute of font (<font color=...>) is deprecated in HTML5. The following syntax would be HTML5-compliant:
This <span style="color:red">word</span> is not black.
Same caution that Jakob made probably still applies:
Be aware that this will not survive a conversion of the notebook to
latex.
An alternative way to do that, is to enter a LaTeX environment within the notebook and change color from there (which is great if you are more fluent in LaTeX than in HTML). Example:
$\color{red}{\text{ciao}}$
would display ciao in red.
For example, if you want to make the color of "text" green, just type:
<font color='green'>text</font>
If none of the above suggestions works for you, try using the style attribute.
**Notes**
<p style="color:red;">ERROR: Setting focus didn't work for me when I tried from jupyter. However it worked well when I ran it from the terminal</p>
This gives me the following result
The text color can be changed using,
<span style='color:green'> message/text </span>
I have tested the ideas that I found in these answers in google colabs.
<span style='color:red'>green</span>
$\color{green}{\text{blue}}$
<font color='red'>orange</font>
Of these the 2nd (LaTeX $…$, and html font) versions work. The style version does not work.
Note: the html font element is deprecated. Therefore I am using the LaTeX version.
<span style='color:blue '> your message/text </span>
So here it is a perfect html css style entry inside a notebook ipynb file.
Of course you can choose your favourite color here and then your text.
<p style="font-family: Arial; font-size:1.4em;color:gold;"> Golden </p>
or
Text <span style="font-family: Arial; font-size:1.4em;color:gold;"> Golden </p> Text
This is a very simple and effective trick for google colab.
Use the (empty) link syntax of the markdown.
[your_message]()
Then you'll get the blue text (underline).
What is preferred method to link PDF(with icon) on a page in terms of semantic, accessibility, usability and SEO?
for example
this is a name of PDF "01ccc5.pdf"
but inside PDF this is the title of
PDF "How to search in long PDF"
Should i use PDF subject as a file
name like "How-to-search-in-long-PDF?
and I want to show link of PDF as a
PDF icon on the page, What is the
best way in terms of accessibility
and usability.
Should i insert pdf icon as a
inside or i should use as a css
background?
Which method is better? this
a{text-indent:-99999px}
<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF
<img src=pdf-icon.jpg" alt="How to search in long PDF" />
</a>
or this
a{text-indent:-99999px;background:url(pdf-icon.jpg);width:32px:height:32px}
or this method http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF </a>
I have to link multiple PDF
Note:
Title of PDF is also will be available before PDF but without any link
like this:
Title PDF
How to search in long PDF PDF icon (with link of PDF)
How to search in long PDF PDF icon (with link of PDF)
How to search in long PDF PDF icon (with link of PDF)
Easy way to bring pdf or other icon with each link using CSS3:
1. icon through background image -> CSS Code:
a[href$=".pdf"]
{
background:url("your-pdf-image.png") no-repeat left;
padding-left:25px;
}
2. bring icon from FontAwesome -> CSS Code:
a[href$=".pdf"]:before
{
content:"\f1c1 ";
font-family: fontawesome;
}
The last one is the best since everything is in the CSS. However, it doesn't work in IE6- and as much as we would all like this browser to die, it is still well used.
So, I'd use the second one, with a special class (e.g. a.pdf). And if you have multiple links with different file types, use sprites.
Edit: I've just understood why you used a negative text-indent. I'm not sure it will work properly with a background. In that case, I'd probably use an img with an alt text and no text content for the a. I nearly always favor using a text and an image, especially for download links.