41,214
pages
ALL POSTSAligning Images With Lines of Text?
<p>I'm trying to align an image with a line of text in such a way that the image appears to be part of the text. I'm not sure if that's a good description, so I have a link to the specific page where I am trying this: https://araenyontest.fandom.com/wiki/Test_Book
</p><p>As you can see, the image a styalised letter 'N', which I am trying to make the first letter of a line of text, though the text automatically centres itself on the image, creating an awkward break in the structure of the line. Additionally, the regular words themselves are altered by a template, so any formatting I'm trying has to be done within the confines of a templates brackets.
</p><p>Sadly this sort of formatting is just beyond my understanding, does anyone happen to know how I would go about aligning that image correctly on the line of text?
</p>
(Edited by Anumaril)
<p>
[[File:N.png|100px|text-bottom]]
</p><p>Is that what you're looking for?
</p>
(Edited by Monochromatic Bunny)
1
<div class="quote"><i>Monochromatic Bunny wrote:
<p>It is! Thank you so much! </p>
[[File:N.png|100px|text-bottom]]
<p>Is that what you're looking for?
</p>
</i></div><p>It is! Thank you so much! </p>
(Edited by Anumaril)
0
<p>As a follow-up question: Is it possible to bake the process of having illuminated initials into the tempalte itself? That is, having the template detect what letter the first word of text uses, and then replacing that first letter with a respective image?
</p>
(Edited by Anumaril)
<p>It's probably possible with JavaScript, but in my opinion, simply using the file would be easier.
</p>
(Edited by Dralkyrie)
You could do it without JS but it would be very inefficient.
(Edited by Andrewds1021)
0
<p>Well it would certainly take a lot of time for me to figure out how to do it. I'm afraid I have next to no experience with these things. I suppose I could mess about with it in my free time and eventually pull something workable together. I plan on using this initial system for many such pages, so in the long run it might save me some time and formatting effort.
</p>
(Edited by Anumaril)
<p>Assuming your file names are all named using the same convention, you could put this in the template.
</p><p>
[[File:{{#sub:{{{1|}}}|0|1}}.png|90px|text-bottom]]{{#sub:{{{1|}}}|1}}
</p><p>This replaces this first letter with an image, and displays the rest of the text excluding the first letter. There's probably many more ways in which you can achieve this that are better, but I'm used to using parser functions.
</p>
(Edited by Monochromatic Bunny)
0
<div class="quote"><i>Monochromatic Bunny wrote:
Assuming your file names are all named using the same convention, you could put this in the template. <p>
<p>You're a life-saver! Is there a way to specify the sizes for each letter (image file) of the alphabet? </p>
Assuming your file names are all named using the same convention, you could put this in the template. <p>
[[File:{{#sub:{{{1|}}}|0|1}}.png|90px|text-bottom]]{{#sub:{{{1|}}}|1}}
</p><p>This replaces this first letter with an image, and displays the rest of the text excluding the first letter. There's probably many more ways in which you can achieve this that are better, but I'm used to using parser functions.
</p>
</i></div><p>You're a life-saver! Is there a way to specify the sizes for each letter (image file) of the alphabet? </p>
(Edited by Anumaril)
<p>Make the number that specifies the px a parameter.
{{{2|90}}}px
</p>
(Edited by Dralkyrie)