Jak napsat text vedle obrázku?

Jak napsat text vedle obrázku: Nastavení ve Wordu

Naučte se správný postup jak napsat text vedle obrázku během několika vteřin. Správné formátování dokumentů šetří čas a pomáhá předcházet rozházenému obsahu. Zjistěte detaily nastavení stylů obtékání pro profesionální vzhled vašich textů.

Jak napsat text vedle obrázku v různých editorech

Umístění textu vedle obrázku se může zdát složité, ale obvykle závisí na správném nastavení obtékání nebo rozvržení prvků. Tento úkon se liší podle toho, zda pracujete v textovém editoru typu Microsoft Word, cloudových Google Dokumentech, nebo upravujete webovou stránku pomocí HTML a CSS.

Níže naleznete podrobné a přehledné návody pro nejčastěji používané programy a technologie. Správným nastavením zabráníte nechtěnému rozpadu formátování celé stránky.

Postup pro zalamování textu v aplikaci Microsoft Word

V programu Microsoft Word je výchozím nastavením vložení obrázku v řádku s textem, což neumožňuje psát vedle něj. Pro změnu musíte aktivovat funkci zalamování.

Krok za krokem, jak psát vedle obrázku ve wordu: 1. Vložte obrázek do dokumentu přes kartu Vložit a volbu Obrázky. 2. Klikněte levým tlačítkem myši na vložený obrázek. 3. V pravém horním rohu obrázku klikněte na ikonu Možnosti rozvržení (nebo na horní liště vyberte Formát obrázku). 4. V nabídce Zalamovat text zvolte možnost Čtverec nebo Těsně. 5. Pomocí myši přetáhněte obrázek na požadované místo.

Text se automaticky uspořádá do strany kolem hranic obrázku. Pokud se vám nedaří kliknout přesně na místo vedle grafiky, zkuste použít neviditelnou tabulku o dvou sloupcích. Sám jsem metodu s tabulkou použil při psaní složité technické zprávy, když mi standardní obtékání neustále odsouvalo nadpisy. Do levého sloupce vložíte grafiku, do pravého napíšete text a následně skryjete ohraničení tabulky. Rychlé a stoprocentně stabilní řešení.

Jak zarovnat text vedle obrázku v Google Dokumentech

Cloudový editor Google Dokumenty nabízí velmi podobný princip jako Word, ale rozhraní je o něco minimalističtější. Uživatelé často tápou, protože ikony nastavení jsou menší.

Postupujte takto: Klikněte na obrázek, který chcete formátovat. V malé nabídce pod obrázkem klikněte na druhou ikonu zleva s názvem zalamování textu kolem obrázku. Nastavte velikost okraje (ideální je hodnota kolem 3 až 5 mm, aby text nebyl nalepený přímo na hraně grafiky). Začněte psát text, který se nyní bude řadit vedle obrázku.

Při psaní delších odstavců v Google Dokumentech doporučuji zvolit možnost Ukotvit na stránce. Zabráníte tím situaci, kdy se obrázek nekontrolovatelně posouvá při každém stisknutí klávesy Enter.

Text vedle obrázku pomocí HTML a CSS na webu

Při tvorbě webových stránek existuje více způsobů, jak docílit vedlejšího uspořádání. Zapomeňte na zastaralé tabulky a využijte moderní styly, které fungují správně i na mobilních telefonech.

Dříve se pro tento účel masivně používala CSS vlastnost float. Ta sice funguje, ale často způsobuje problémy s přetékáním obsahu, pokud zapomenete vyčistit okolní prvky. Modernějším a doporučovaným řešením je text vedle obrázku html css, který rozdělí prostor do flexibilních sloupců.

Pamatujte však na jedno zásadní pravidlo. Mobilní zobrazení vyžaduje prostor. Na displeji telefonu vypadá text stlačený vedle úzkého obrázku velmi nečitelně. Flexbox umožňuje na stolním počítači zobrazit prvky vedle sebe a na mobilu je automaticky naskládat pod sebe. Tento přístup zachrání použitelnost vašeho webu.

Srovnání metod formátování

Microsoft Word (Obtékání)

• Jednoduché dokumenty s menším počtem grafických prvků

• Nízká při doplňování dalšího textu, obrázek může skákat

• Velmi rychlé, stačí dvě kliknutí myší na ikonu rozvržení

Neviditelná tabulka (Word/Google)

• Složitější reporty, strukturované šablony a vícestránkové texty

• Vysoká, text i obrázek drží pevně ve svých buňkách

• Pomalejší, vyžaduje vytvoření tabulky a skrytí čar

CSS Flexbox (Web) ⭐

• Moderní webové stránky, blogy a online produktové karty

• Maximální, plně responzivní zobrazení pro mobily i PC

• Vyžaduje zápis několika řádků kódu v HTML a CSS

Hana a její boj s rozvržením seminární práce

Hana, studentka z Brna, dokončovala svou třicetistránkovou seminární práci. Potřebovala vložit grafy a hned vedle nich napsat jejich textovou analýzu, ale Word jí grafiku neustále házel na novou stránku.

Nejprve zkoušela mačkat mezerník a klávesu Enter, aby text ručně dotlačila vedle grafu. Výsledkem bylo kompletní rozházení předchozích tří stránek a hodina ztraceného času.

Pak objevila funkci zalamování textu. Klikla na graf, zvolila možnost Čtverec a nastavila pevné ukotvení k odstavci na stránce.

Během deseti minut měla všech pět grafů perfektně zarovnaných, text čistě lícoval s pravým okrajem obrázků a celá práce prošla úspěšným odevzdáním.

Webový designér Jakub a responzivní e-shop

Jakub upravoval vzhled produktové stránky pro lokální e-shop. Chtěl mít fotografii produktu vlevo a popis s cenou vpravo, ale na starém kódu s vlastností float se mu text na mobilu ošklivě mačkal.

První pokus s fixní šířkou sloupců selhal, protože na menších obrazovkách popis produktu zcela zmizel pod spodní okraj displeje.

Rozhodl se kód kompletně přepsat. Použil kontejner s vlastností display flex a pro mobilní telefony nastavil pravidlo pro zalomení do jednoho sloupce.

Stránka se začala chovat správně, zobrazení na mobilech se stalo plně čitelným a konverzní poměr objednávek z mobilních zařízení vzrostl o necelou třetinu.