How to Split to Make a Two Column Format for Bilingual Posts

in #introduceyourself5 years ago (edited)

English Version

So we decided to write our post in HTML in two separate columns, for, say, a bilingual post, and so how do we do that? We'll just simply apply a couple of parameters to our format:

<div class="text-justify">

Using the <div class="text-justify"> at the beginning of the post will even out the printing in each column making it a very aesthetic post, and then using the <div class="pull-left"> before our English paragraph, and then div class="pull-right"> before our Spanish paragraph.

For example, we will write our first paragraph in English and the second paragraph in Spanish, so we will do the <div class="pull-left"> at the beginning of our English, and use an </div> at the end: in this case it was just one sentence. Then when we want to do our Spanish text on the right, we simply use our <div class=" pull-right"> and an </div> at the end of the sentence or paragraph.

<div class="pull-left">
So this is the way that you want to format for a bilingual publication, with English on the left and Spanish on the right.
</div>

<div class="pull-right">
Así que esta es la forma en que desea formatear para una publicación bilingüe, con inglés a la izquierda y español a la derecha.
</div>

This is how it will look:

So this is the way that you want to format for a bilingual publication, with English on the left and Spanish on the right.
Así que esta es la forma en que desea formatear para una publicación bilingüe, con inglés a la izquierda y español a la derecha.

To insert a photo into the post, follow the same format but for installing a photo:

To center it just use <center>image link here</center> here:

Image taken by me on my Samsung S4 at my dinner time

  • grilled chicken,
  • kale, cabbage and tomato salad, and
  • watermelon chunks.
  • So now that we've come that far, and all of a sudden we decide we want to add another paragraph, so we just resume our formatting like so:

    <div class="pull-left">
    So now this came to mind to add another paragraph to my story, and so this is added for amusement purposes only.
    </div>

    <div class="pull-right">
    Así que ahora se me ocurrió agregar otro párrafo a mi historia, y así se agrega solo para fines de entretenimiento.
    </div>

    So now this came to mind to add another paragraph to my story, and so this is added for amusement purposes only.
    Así que ahora se me ocurrió agregar otro párrafo a mi historia, y así se agrega solo para fines de entretenimiento.

    So this is basically how to format the two column post to make it convenient to present biligual posts, rather than making two completely separate posts, one in English and one in Spanish.

    Version en Espaniol

    Así que decidimos escribir nuestra publicación de HTML en dos columnas separadas, para, digamos, una publicación bilingüe, y luego, ¿cómo hacemos eso? Simplemente aplicaremos un par de parámetros a nuestro formato:

    El uso de <div class = "text-justify"> al principio de la publicación coincidirá con la impresión en cada columna, lo que lo convertirá en una publicación muy estética, y luego use <div class = "pull-left"> antes de nuestro párrafo en español, y luego <div class = "pull -right"> antes de nuestro párrafo en inglés .

    Por ejemplo, escribiremos nuestro primer párrafo en español y el segundo párrafo en inglés, así que haremos el <div class = "pull-izquierda "> al comienzo de nuestro español, y usaremos </ div> al final: en este caso, fue solo una oración, luego, cuando queremos que nuestro texto en inglés a la derecha, simplemente usemos <div class = "pull-right"> al principio y </ div> al final de la oración o párrafo.

    <div class="pull-left">
    Así que esta es la forma en que queremos formatear para una publicación bilingüe, con el español a la izquierda y el inglés a la derecha.
    </div>

    <div class="pull-right">
    So this is the way we want to format for a bilingual publication, with Spanish on the left and English on the right.
    </div>

    Así que esta es la forma en que queremos formatear para una publicación bilingüe, con el español a la izquierda y el inglés a la derecha.
    So this is the way we want to format for a bilingual publication, with Spanish on the left and English on the right.

    Para insertar una foto en la publicación, sigue el mismo formato pero para instalar una foto

    Para centrarlo solo use <center>enlace de imagen aquí</center> aqui:

    Imagen tomada por mí en Samsung S4 a la hora de la cena

    pollo a la parrilla,
    Ensalada de col rizada, repollo, y tomate, y
    trozos de sandia

    Ahora que hemos llegado tan lejos, y de repente decidimos que queremos agregar otro párrafo,
    así que simplemente resumimos nuestro formato de esta manera:

    <div class =" pull-left ">
    Así que ahora se me ocurrió agregar otro párrafo a mi historia, y así se agrega solo para fines de entretenimiento.
    </ div>

    <div class =" pull-right ">
    So now this came to mind to add another paragraph to my story, and so this is added for amusement purposes only.
    </ div>

    Así que ahora se me ocurrió agregar otro párrafo a mi historia, y así se agrega solo para fines de entretenimiento.
    So now this came to mind to add another paragraph to my story, and so this is added for amusement purposes only.

    Así que básicamente es cómo formatear dos publicaciones en columnas para que sea conveniente presentar publicaciones bilingües, en lugar de hacer dos publicaciones completamente separadas,
    Uno en español y otro en inglés.

    Thanks for this awesome banner @liberty-minded

    iSupportHHYM.gif

    iSupportSteemTerminal.gif
    Thanks for these super cool banners @medro-martin

    Sort:  
    This information is a golden egg. Thank you!
    Esta información es un huevo dorado. Gracias!

    @jamerussell,

    This is an OUTSTANDING post my friend!! This covers many topics... proper coding, the ability to present a post in unison with another language; perfect example of engagement, and spreading that positive energy! To be quite honest, I would label this along the lines of #educational... you should be quite proud of this one brother... would love to see more content like this... yes I know, there are some out there, but this has all the wonderful semantics of what a properly created post should be!

    By the way...


    Your dinner looked VERY delicious lol... thanks again for providing this; dare I say everyone at the @steemterminal will be impressed, as well as those in the @heyhaveyamet community... bravo man!

    Wes

    Thank you @wesphilbin, as soon as @brittandjosie mentioned it, I was already thinking...
    Excellent having the crew back everyone up...

    Hi and welcome here! When I started on steemit, my biggest problem was to find interesting people to interact with. So, to help newcomers getting started I created a directory with other interesting and or talented steemians to follow or interact with. Feel free to check it out at https://www.steemiandir.com I am sure it will help you find like-minded people. Enjoy your stay here and do not hesitate to contact me if you have any questions!


    Welcome to Steem @jamerussell.

    Do read A thumb rule for steemit minnows - 50:100:200:25 for starter tips.

    Spend time reading Steem Blue Paper to know how Steem blockchain works and if you still have any queries ask them on our Ask me anything about Steemit post and we will try to answer that.

    You can earn Steem rewards for reading and sharing your insights using our Highlights Extension

    All the Best!!!

    Thanks @steemladder, but once again, I am using the introduceyourself tag to get to the newbies, especially the ones who are making duplicate posts in two languages...

    Can't upvote as due to some reckless upvoting and low voting power it's at the beach to recharge its batteries... 😂 But I'll Resteem for more visibility. 👌

    Posted using Partiko Android

    Hehehe! You play you pay @dkkarolien!
    That is excellent, right now hang on to what you have, thank you for pushing me to write, hahaha, you and @thekittygirl!!!

    This is exactly what I meant it’s not do-able by phone but sure gonna do one today behind my computer

    It's enjoyable @brittandjosie, but make sure you wear a beenie on your head, so you don't wind up pulling your hair out!!! Hahahaha! It was hard doing this post! Very time consuming!

    You have received 5x upvotes from the members of @steemexplorers from your free link submission in our discord server. Steemexplorers is an initiative bringing information on various Steemit services and communities in a central discord to save you time and help you grow. It's free, it's easy, and it's here to help you in so many ways. Come by our discord to learn more! Link to Discord: https://discord.gg/6QrMCFq. Our team also offers an additional upvoting service called @givememonsters where you can presently trade in 1 to 10 DEC from the Steem Monsters game for up to $0.03 upvotes on ANY steemit posts. The vote purchasing value here is some of the best returns on your investments that you can find anywhere so come by and visit this service today!

    You got voted by @curationkiwi thanks to Wes Philbin! This bot is managed by KiwiJuce3 and run by Rishi556, you can check both of them out there. To receive upvotes on your own posts, you need to join the Kiwi Co. Discord and go to the room named #CurationKiwi. Submit your post there using the command "!upvote (post link)" to receive upvotes on your post. CurationKiwi is currently supported by donations from users like you, so feel free to leave an upvote on our posts or comments to support us!
    We have also recently added a new whitelist feature for those who would like to support CurationKiwi even more! If you would like to receive upvotes more than 2x greater than the normal upvote, all you need to do is delegate 50 SP to @CurationKiwi using this link.

    Thanks @curationkiwi, @wesphilbin, KiwiJuice3 and Rishi556.

    This post has received a 3.13 % upvote from @drotto thanks to: @curationkiwi.

    This post was resteemed by @minnowresteemr!

    Send a min of 0.001 STEEM/SBD with post in memo for a resteem!

    Follow me to support other Minnows!


    This post was shared in the Curation Collective Discord community for curators, and upvoted and resteemed by the @c-squared community account after manual review.
    @c-squared runs a community witness. Please consider using one of your witness votes on us here

    Thank you @c-squared, you're doing a good job!

    Hello @jamerussell

    Welcome to Steemit & Wish you luck - success with Steemit!

    Currently, We're supporting for the Planktons by our small upvote. If you follow @haccolong you will get free upvote of @hoaithu's Curation trail & minimum 1 follow from me. You may like it, Check statement here.

    To get 3000points and receive additional rewards from your activities on Steemit, you can use Partiko app for your phone.

    Please ignore this reply if you do not need the above.

    Posted using Partiko Android

    You've brought out something I've never heard before @jamerussell.
    <div class = "text-justify">
    was not included in the code instructions I got, which were:
    <div class=pull-left>WRITE ALL YOUR TEST HERE FOR THE LEFT COLUMN.</div><div class=pull-right>WRITE ALL YOUR TEST HERE FOR THE RIGHT COLUMN.</div>
    I'm not sure how to incorporate that in the future if/when I do another
    Two Columns post. Question, would that be posted at the top of each column of text?

    pixresteemer_incognito_angel_mini.png
    Bang, I did it again... I just rehived your post!
    Week 80 of my contest just started...you can now check the winners of the previous week!
    !LUV
    12

    <><

    <><

    LUV

    Connect

    Trade


    @jamerussell, you've been given LUV from @pixresteemer.

    Check the LUV in your H-E wallet. (2/5)